JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<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(){
        
        //kp----------------------------------
        var iwidth = 300;//(img.width*50)/100;
				var iheight = 150;//(img.height*50)/100;
        //----------------------------------kp
            canvas.width = iwidth;//img.width;
            canvas.height = iheight;//img.height;
            ctx.drawImage(img,0,0,iwidth,iheight);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}