JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" accept="image/*" id="file-input" />
<button id="upload">Process</button>

<div id="img-container"></div>
<div id="canvas-container"></div>

JavaScript

$(document).ready(function(){
    window.URL = window.URL || window.webkitURL;
    
    $('#upload').click(function(){
    
        var file = document.getElementById("file-input").files[0];
        var src = window.URL.createObjectURL(file);
        var img     = $("#img-container").append('<img src="'+src+'" id="blobed" style="border:solid 2px #230bd0; margin-top:5px;"/>').find('#blobed');
        
        console.log(file);
        console.log(src);
        console.log(img);
        
        img.bind('load', function(){  
            var img_width     = img.width();
            var img_height    = img.height();
            console.log(img_width);
            console.log(img_height);
            
            $('#canvas-container').append('<canvas style="border:solid 2px #b70bd0; margin-top:20px;" height="'+img_height+'" width="'+img_width+'"  id="blob-canvas" ></canvas>');
            
            var canvas  = document.getElementById('blob-canvas');
            var ctx     = canvas.getContext('2d');
            
            var img2 = new Image();  
            img2.height = img_height;
            img2.width = img_width;
    
        img2.onload = function(){  
              ctx.drawImage(img2,0,0,img_width,img_height);
        }; 
        
        img2.src = img.attr('src');
    
    });
        
    });
    

});