JSFiddle - React, Tailwind, and code Playground

by msacar

HTML

<h1>Test image here :  Use this image</h1>
<img src="https://emlaksitem.com/5.JPG" alt="" style="max-width:200px">



<div>
<h2>every upload shold display 2 images </h2>
<h3>one is original the other one is came from canvas</h3>
    <div id="test"></div>
</div>
  

<input type="file" name="qwe" id="file">

<br>
<br>

JavaScript

function testimg(src) {
            var img = document.createElement("img");   
            img.src = src;
            document.querySelector('#test').appendChild(img)
        }

        $('#file').on('change', fileAdded)

        function fileAdded(event) {

            var reader = new FileReader;

            reader.onload = function () {
                var image = new Image();
                image.src = reader.result;
                image.onload = function () {
                    document.querySelector('#test').appendChild(this)
                    var imgToSend = processImg(this, this.width, this.height);
                    testimg(imgToSend)
                };
            };

            reader.readAsDataURL(event.currentTarget.files[0]);

        }

        function processImg(image, srcWidth, srcHeight) {
            var canvas = document.createElement('canvas');
            canvas.width = srcWidth;
            canvas.height = srcHeight;

            var ctx = canvas.getContext("2d");

            ctx.drawImage(image, 0, 0);
            ctx.fill();

            return canvas.toDataURL();
        }