JSFiddle - React, Tailwind, and code Playground

by Shiva meda

HTML

<input type="file" id="imageread">
<canvas id="cvs"></canvas>

JavaScript

$('input').change(function() {
    
    var readimg = new FileReader;
    
    readimg.onload = function() {
        var img = new Image;
        img.onload = function() {
            var c=document.getElementById("cvs");
            var ctx=c.getContext("2d");
            ctx.drawImage(img,0,0,200,180);          
        }
        img.src = readimg.result;
                
    };
    
    readimg.readAsDataURL(this.files[0]);
    
});