JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<body>
    <div id="img_load">
        <img id="test" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" style="width: 200px; height: 200px;" />
    </div>
    <button id="btn" type="button">OK</button>
    <div id="img_preview" style="border: 1px solid black; width: 200px; height: 200px;">
        <canvas id="myCanvas" width="200" height="200"></canvas>
    </div>
</body>

JavaScript

$(function () {

    $("#btn").click(function () {
        html2canvas($("#img_preview"), {
            onrendered: function (canvas) {

                //theCanvas = canvas;
                //document.body.appendChild(canvas);
                //Canvas2Image.saveAsPNG(canvas); 

                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("test");

                var x = 0;
                var y = 0;
                var width = 200;
                var height = 200;

                ctx.drawImage(img, x, y, width, height);

            }
        });
    });
});