JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1">
    <div>
        <input type="file" id="imageinput" />
        <canvas width="300" height="300" id="mycanvas"></canvas>
    </div>
    </form>

JavaScript

document.getElementById('imageinput').addEventListener('change', function(event) {
    var myCanvas = document.getElementById('mycanvas');
    var ctx = myCanvas.getContext('2d');
    var img = new Image();
    img.onload = function(){
        myCanvas.width = img.width;
        myCanvas.height = img.height;
        
        ctx.drawImage(img, 0, 0);
        
        console.log(myCanvas.toDataURL('image/jpeg'));
    };
    
    img.src = URL.createObjectURL(event.target.files[0]);
});