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

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

    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");
    };