JSFiddle - React, Tailwind, and code Playground

by Sam88

HTML

<p>Image to use:</p>
<input type='file' onchange="readURL(this);" />
<p>Immagine caricata</p>
<img id="immagine" src="" alt="Immagine caricata" width="100" height="100" />
<canvas id="myCanvas" width="100" height="100" style="display:none;"></canvas>
<p>Immagine elaborata</p>
<img id="immagineDopo" src="" alt="Immagine elaborata" width="100" height="100" />

CSS

#immagine {
    background: #cccccc;
    border:2px solid black;
}
#immagineDopo {
    background: #cccccc;
    border:2px solid black;
}

JavaScript

//crop e zoom

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);
        reader.onload = function (e) {
            $('#immagine')
                .attr('src', e.target.result)
                .width("auto")
                .height("auto");
            
            var w = $('#immagine').width();
            var h = $('#immagine').height();
            
            var min = (w>h)?h:w;
            var max = (w>h)?w:h;
            
            offset = (max - min)/2;
            
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var img = document.getElementById("immagine");
            
            if(w>h){
                ctx.drawImage(img, offset, 0, min, min, 0, 0, 100, 100);
            }else{
                ctx.drawImage(img, 0, offset, min, min, 0, 0, 100, 100);
            }

            var dataURL = c.toDataURL();
            $('#immagineDopo')
                .attr('src', dataURL)
                .width(100)
                .height(100);
        };
        //document.getElementById('immagineDopo').src = dataURL;
    }
}