JSFiddle - React, Tailwind, and code Playground

by rajeshpillai

HTML

<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<img id="cropbox" src="http://lorempixel.com/400/400" />

<br />

<br />
<div id="previewcrop">
<img id="preview" src="http://lorempixel.com/400/400" />
</div>

CSS

#previewcrop{
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
    margin-left: 5px;
}

JavaScript

var imgwidth = 400;
var imgheight = 400;
jQuery('#cropbox').Jcrop({
            onChange: showPreview,
            onSelect: showPreview,
            bgColor: 'white',
            aspectRatio: 1,
            boxWidth: imgwidth/3,
            boxHeight: imgheight/3
        });

function showPreview(coords)
{
    var rx = 100 / coords.w;
    var ry = 100 / coords.h;

    $('#preview').css({
        width: Math.round(rx * imgwidth) + 'px',
        height: Math.round(ry * imgheight) + 'px',
        marginLeft: '-' + Math.round(rx * coords.x) + 'px',
        marginTop: '-' + Math.round(ry * coords.y) + 'px'
    });
};