JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <title>File to Canvas (iOS 6 Ready)</title>
</head>
    <body>
        <input type="file" id="file-input">
        <canvas id="canvas" width="800px" height="800px"></canvas>
    </body>
</html>

JavaScript

$(function() {
            $('#file-input').change(function(e) {
                var file = e.target.files[0];

                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);        
            });

            function fileOnload(e) {
            var $img = $('<img>', { src: e.target.result });
                var canvas = $('#canvas')[0];
                var context = canvas.getContext('2d');
                 
                 $img.load(function() {
                    context.drawImage($img[0], 0, 0,800,800);
                 });
            }
        });