JSFiddle - React, Tailwind, and code Playground

by Rahul Chaudhary

HTML

<input type="file" name="test">
<div>
  <img id="image">
</div>

CSS

img {
  max-width: 100%;
}

JavaScript

$(document).ready(function() {
  $('input').change(function() {
    var reader = new FileReader();
    reader.onload = function(event) {
      $('#image').attr('src', event.target.result);
    };
    reader.readAsDataURL(this.files[0]);

    $('#image').cropper({
      aspectRatio: 16 / 9,
      crop: function(e) {
        console.log(e.height + ' ' + e.width);
      }
    });
    console.log($('#image').cropper('getCropBoxData'));
  });
});