JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/2.0.4/js/Jcrop.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.jcrop/0.9.12/js/jquery.Jcrop.js"></script>
<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
  <tr>
    <td>
      <img id="Image1" src="" alt="" style="display: none" width="300" />
    </td>
    <td>
      <canvas id="canvas" height="5" width="5"></canvas>
    </td>
  </tr>
</table>
<br />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />

JavaScript

var height
var Width

$(function() {
  $('#FileUpload1').change(function() {
    $('#Image1').hide();
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#Im	age1').show();
      $('#Image1').attr("src", e.target.result);
      $('#Image1').Jcrop({
        aspectRatio: 1,
        onChange: SetCoordinates,
        onSelect: SetCoordinates,
        trueSize: [Width, height]
      });
    }
    reader.readAsDataURL($(this)[0].files[0]);
  });
});


$('#Image1').on('load', function() {
  var height = $('#Image1').prop('naturalHeight');
  var Width = $('#Image1').prop('naturalWidth');
  alert('width: ' + height + ' and height: ' + Width);
});


function SetCoordinates(c) {
  $('#imgX1').val(c.x);
  $('#imgY1').val(c.y);
  $('#imgWidth').val(c.w);
  $('#imgHeight').val(c.h);

  var x1 = $('#imgX1').val();
  var y1 = $('#imgY1').val();
  var width = $('#imgWidth').val();
  var height = $('#imgHeight').val();

  var canvas = $("#canvas")[0];
  var context = canvas.getContext('2d');
  var img = new Image();
  img.onload = function() {
    canvas.height = height;
    canvas.width = width;
    context.drawImage(img, x1, y1, width, height, 0, 0, width, height);
    $('#imgCropped').val(canvas.toDataURL());
    $('[id*=btnUpload]').show();
  };
  img.src = $('#Image1').attr("src");
};