JSFiddle - React, Tailwind, and code Playground

by 0GiS0

HTML

<script src="//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">
<img src="//returngis.net/wp-content/uploads/demos/unix.jpg"/>
<canvas id="canvasJCrop"></canvas>
<span id="measures"></span>
<canvas id="resizeCanvas"></canvas>

JavaScript

function id(elem) {
        return document.getElementById(elem);
    }

    var canvas = id('canvasJCrop'),
        img = id('UnixImg'),
        measures = id('measures');


    function paintOnCanvas(coords) {
        console.log(coords);

        var context = canvas.getContext('2d');

        canvas.width = coords.w;
        canvas.height = coords.h;

        console.log([img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.y]);
        context.drawImage(img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.h);

        measures.innerText = "width: " + canvas.width + " height: " + canvas.height;

        if (canvas.height > 82 || canvas.width > 300) {
            
            var imgToResize = new Image();

            imgToResize.onload = function () {

                var maxWidth = 300, maxHeight = 82;

                //Image size
                var width = imgToResize.width,
                    height = imgToResize.height;

                //Resizing...
                if (width > maxWidth) {
                    height *= maxWidth / width;
                    width = maxWidth;
                }

                if (height > maxHeight) {
                    width *= maxHeight / height;
                    height = maxHeight;
                }


                var resizeCanvas = id('resizeCanvas');
                resizeCanvas.width = width;
                resizeCanvas.height = height;

                var ctx = resizeCanvas.getContext('2d');

                ctx.drawImage(imgToResize, 0, 0, width, height);

                measures.innerText = "width: " + canvas.width + " height: " + canvas.height;

            };

            imgToResize.src = canvas.toDataURL();
        }
    }

    $("#UnixImg").Jcrop({
        onSelect: paintOnCanvas,
        aspectRatio: null
    });