JSFiddle - React, Tailwind, and code Playground

by timrwood

HTML

<input type="file" />

CSS

img {
    width: 150px;
    height: auto;
}
canvas {
    background: #ccc;
}

JavaScript

var fileReader = new FileReader();

fileReader.onload = function(e){
    var a = new Image();
    a.onload = function () {
        var canvas = $('<canvas>').attr({
            width: 300,
            height: 300
        }),
        ctx = canvas[0].getContext('2d');
    
        ctx.drawImage(a, 0, 0, 300, 300);
        $(canvas).appendTo($('body'));
    };
    a.src = e.target.result;
    $(a).appendTo($('body'));
}

$('input').on('change', function (e){
    var files = e.target.files, i;

    for (i = 0; i < files.length; i++) {
        fileReader.readAsDataURL(files[i]);
    }
});