Image Cropper full source code given below-


Html Will be look like:

  UPLOADCARE_PUBLIC_KEY = "demopublickey";
<script src="" charset="utf-8"></script>

<h1>Crop IMAGE</h1>


 Crop JPG, PNG Images in Seconds.


<!-- 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 -->


<img src="yourImagePath" alt="" id="preview" width=300 height=300 />


and CSS will be:

    #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;

JavaScript will be:

    // 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;


If you solve your problem in this post, please share this post with your friends and colleagues.

Enjoy the Source code, you can use anywhere prod or staging.