JSFiddle - React, Tailwind, and code Playground

by Dalin Huang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.css">
<!-- Wrap the image or canvas element with a block element (container) -->
<div>
  <img id="image" src="https://s3.amazonaws.com/dev-resized-image/full/dad3b2b5-1d74-4277-8ee7-fc11196a508c/funny-that-look-pictures-lol.jpg">
</div>
<button id="edit_img">EDIT IMG</button><br><br>
<button id="reset">RESET</button>

CSS

/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

JavaScript

$('#edit_img').click(function(){

  $('#image').cropper({
    aspectRatio: 'auto',
    crop: function(e) {
      // Output the result data for cropping image.
      console.log(e.x);
      console.log(e.y);
      console.log(e.width);
      console.log(e.height);
      console.log(e.rotate);
      console.log(e.scaleX);
      console.log(e.scaleY);
    }
  });
});

$("#reset").click(function() {
  $('#image').cropper("reset");
});