JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<input type="file" value="Browse File" accept="image.*" capture="camera">

      <canvas></canvas>

CSS

canvas {
    width: 500px;
    height: 500px;
    background: blue;
}

JavaScript

var file = document.getElementsByTagName('input')[0];
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var reader = new window.FileReader();

reader.onloadend = function(e) {
    console.log('reader', e.target.result);
    var img = new Image();
    img.src = e.target.result;
    img.onload = function () {
        alert(img.height + ' x ' + img.width);
        canvas.height = img.height / 2;
        canvas.width = img.width / 2;
        ctx.drawImage(img, 0, 0, img.height / 2, img.width / 2);
    };
};

file.addEventListener('change', function(e) {
    console.log('event:', e);
    reader.readAsDataURL(e.target.files[0]);
    
});