JSFiddle - React, Tailwind, and code Playground

by Vignesh Gopalakrishnan

HTML

<head>
  <link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-default.css" />

  <script type="text/javascript" src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>
</head>  

<div>
<img title="A ladybug being harassed by an ant." alt="A ladybug being harassed by an ant." src="http://odyniec.net/projects/imgareaselect/ferret.jpg" id="ferret">
</div>

JavaScript

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);

  
    $('#ferret + div > img').css({
        width: Math.round(scaleX * 400) + 'px',
        height: Math.round(scaleY * 300) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'

    });

}

$(document).ready(function () {
    $('<div><img src="http://odyniec.net/projects/imgareaselect/ferret.jpg" style="position: relative;" /><div>')
        .css({
            float: 'left',
            position: 'relative',
            overflow: 'hidden',
            width: '100px',
            height: '100px'
        })
        .insertAfter($('#ferret'));

    $('#ferret').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});