Image Cropper full source code given below-


Answer:

Html Will be look like:

<head>
<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>
<script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" charset="utf-8"></script>
</head>

<body>
<h1>Crop IMAGE</h1>

<p>

 Crop JPG, PNG Images in Seconds.

</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="yourImagePath" alt="" id="preview" width=300 height=300 />

</div>
</body>

and CSS will be:

.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;
    }

JavaScript will be:

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

DEMO PREVIEW: https://imagescropper.netlify.app/

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.