JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-default.css">
<script src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>
<div style='overflow:hidden;
    position:relative; max-width:100px; max-height:100px; height:auto;
'><img src='http://www.basekit.com/widget/image/placeholder.png' id='img_thumb' /></div>
<div><img src='http://www.basekit.com/widget/image/placeholder.png' id='img' /></div>
<input type='file' name='img' size='65' id='uploadimage' />

CSS

#img_thumb{
    width:100px;
    height:100px;
    max-width:100px;
}
#img{
    width:auto;
    height:auto;
    max-width:300px;
}

JavaScript

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

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

    });

}

$(document).ready(function () {
    $('#img').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

function draw(ev) {
    var img = new Image(),
        f = document.getElementById("uploadimage").files[0],
        url = window.URL || window.webkitURL,
        src = url.createObjectURL(f);

    img.src = src;
    img.onload = function() {
        $("#img").attr('src', img.src);
        var maxWidth = 300, 
            maxHeight = 300,
            iRatio = 1,
            hRatio = 1,
            wRatio = 1,
            nWidth = 300,
            nHeight = 300;
        /*
        if(img.width > img.height){
            iRatio = Math.round(img.height / img.width);
            if(img.height > maxHeight) hRatio = Math.round(maxHeight / img.height);
            else hRatio = Math.round(img.height / maxHeight);
            nHeight = hRatio * iRatio * img.height;
        }else if(img.height > img.width){
            iRatio = Math.round(img.width / img.height);
            nWidth = (img.width / maxWidth) * iRatio * img.width;            
        }
                
        $("#img").css({ "height":nHeight+"px", "width":nWidth+"px" });
        */
        $("#img_thumb").attr('src', img.src);
    };
}

document.getElementById("uploadimage").addEventListener("change", draw, false);