JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jcrop-cdn.tapmodo.com/v0.9.12/js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v0.9.12/css/jquery.Jcrop.min.css">
<canvas id="viewport" width="602" height="500"></canvas>
<canvas id="preview" style="width:150px;height:150px;overflow:hidden;"></canvas>

JavaScript

function make_base() {
    var base_image = new Image();
    base_image.src = 'http://jcrop-cdn.tapmodo.com/assets/images/sierra2-750.jpg';
    base_image.onload = function () {
        context.drawImage(base_image, 0, 0);
    }
}

function updatePreview(c) {
    if (parseInt(c.w) > 0) {
        // Show image preview
        var imageObj = $("#viewport")[0];
        var canvas = $("#preview")[0];
        var context = canvas.getContext("2d");

        if (imageObj != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
            context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
        }
    }
}

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

make_base();

$('#viewport').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    allowSelect: true,
    allowMove: true,
    allowResize: true,
    aspectRatio: 0
});