JSFiddle - React, Tailwind, and code Playground

by survivant

HTML

<input type="file" id="file"><script>
    document.getElementById('file').onchange=function(){
        var filereader = new FileReader();
        filereader.onload = function(event) {
            var img = new Image();
            img.onload = function() {
                var c = document.createElement('canvas'); // Create canvas
              
                c.width = img.width;
                c.height = img.height;  c.getContext('2d').drawImage(img,0,0,img.width,img.height);
                var toAppend = new Image;
                toAppend.title = 'Imported via upload, drawn in a canvas';
                toAppend.src = c.toDataURL('image/png');
                document.body.appendChild(toAppend);
            }
            img.src = event.target.result; // Set src from upload, original byte sequence
            img.title = 'Imported via file upload';
            document.body.appendChild(img);
        };
        filereader.readAsDataURL(this.files[0]);
    }
    </script>