JSFiddle - React, Tailwind, and code Playground

by psayre23

HTML

<input type="file" id="input"/>
<img id="raw"/>
<canvas id="canvas"></canvas>

JavaScript

var WIDTH = 500;
var URL = window.URL || window.webkitURL;

input.onchange = function () {
    var file = this.files[0];
    var objURL = URL.createObjectURL(file);
    raw.onload = function () {
        URL.revokeObjectURL(raw.src);
        canvas.width = WIDTH;
        canvas.height = (canvas.width / raw.width) * raw.height;
        canvas.getContext('2d').drawImage(raw, 0, 0, canvas.width, canvas.height);
    };
    raw.src = objURL;
};