Build an Advanced Image Circle Shape Cropper in Browser Using UploadCare API in Javascript Full Project For Beginners

Build an Advanced Image Circle Shape Cropper in Browser Using UploadCare API in Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building an advanced image circle cropper in browser using uploadcare api in javascript.All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the below code

 

 

index.html

 

 

<style>
    /* Making a round cropping frame. This CSS also rounds the preview image. */
.uploadcare--jcrop-holder>div>div, #preview {
  border-radius: 50%;
}

/* Styles and stuff for the page */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
}
#preview {
  margin-top: 1rem;
}
p {
  text-align: center;
  max-width: 600px;
  padding: 1em;
  background: #eee;
}
h1 {
  text-align: center;
}
</style>
<script>
    UPLOADCARE_PUBLIC_KEY = "demopublickey";
  </script>
  <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>
  <h1>Uploadcare Widget. Crop image to circle..</h1>
  <p>
    This Pen shows you how to use the Uploadcare Widget UI to crop any image to circle.
  Technically, it uses some CSS to round out an image cropped using the 1:1 ratio.
  </p>
  <!-- The input element below will turn into the widget -->
  <input type="hidden" role="uploadcare-uploader" data-crop="1:1" data-images-only >
  <!-- Your preview will be put here -->
  <div>
    <img src="" alt="" id="preview" width=300 height=300 />
  </div>
  <script>
      // Getting an instance of the widget.
const widget = uploadcare.Widget('[role=uploadcare-uploader]');
// Selecting an image to be replaced with the uploaded one.
const preview = document.getElementById('preview');
// "onUploadComplete" lets you get file info once it has been uploaded.
// "cdnUrl" holds a URL of the uploaded file: to replace a preview with.
widget.onUploadComplete(fileInfo => {
  preview.src = fileInfo.cdnUrl;
})
  </script>

 

See also  Build a Tower Defense Base Game in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

 

Leave a Reply