JSFiddle - React, Tailwind, and code Playground

HTML

<img id="image" src=""><br>
<input type="file" id="imageLoader" name="imageLoader"/><br>
<canvas id="imageCanvas"></canvas>

JavaScript

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
    
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = 100;
            canvas.height = 100;
            ctx.drawImage(img,0,0, 100, 100);
            document.getElementById("image").src = canvas.toDataURL("image/jpeg");
        }
        img.src = event.target.result;
  		  
    }
    reader.readAsDataURL(e.target.files[0]);     
}