JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<link rel="stylesheet" href="https://fengyuanchen.github.io/cropperjs/css/cropper.css">
<div class="container"></div>

JavaScript

var url = 'https://dx5683gi1tv0w.cloudfront.net/dtrjyhj9q/image/upload/q_auto:eco/s3.local/upld9zg54jmz';
image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
    var $container = $('.container');
    $container.append(image);
    var cropper = new Cropper(image, {
        autoCropArea: 0.5,
        checkCrossOrigin: false,
        guides: true,
        toggleDragModeOnDblclick: false,
        viewMode: 1,
        wheelZoomRatio: false,
        zoomOnTouch: false,
        zoomOnWheel: false
    });
    setTimeout(function() {
        console.log(
          cropper.getCroppedCanvas().getContext('2d').getImageData(0,0,30,30)
        );
    }, 2.5 * 1000);
};
image.src = url;