uploading two pictures

by Nadezhda Kutsenko

HTML

<div>
    <input type="file" id="imageLoader1" name="imageLoader" />
    <br/>
    <input type="file" id="imageLoader2" name="imageLoader" />
    <br/>
    <canvas id="canvas" style="background:red;"></canvas>
</div>

JavaScript

var imageLoader1 = document.getElementById('imageLoader1');
    var imageLoader2 = document.getElementById('imageLoader2');
    imageLoader1.addEventListener('change', handleImage, false);
    imageLoader2.addEventListener('change', handleImage, false);
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    function handleImage(e) {
        if (e.target == imageLoader1) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img1 = new Image();
                img1.onload = function () {
                    canvas.width = 1000;
                    canvas.height = 500;
                    ctx.drawImage(img1, 0, 0, img1.width, img1.height, 0, 0, img1.width * 0.4, img1.height * 0.4);
                }
                img1.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }
        if (e.target == imageLoader2) {
            var reader = new FileReader();
            reader.onload = function (event) {
                var img2 = new Image();
                img2.onload = function () {
                    canvas.width = 1000;
                    canvas.height = 500;
                    ctx.drawImage(img2, 0, 0, img2.width, img2.height, img2.width * 0.4, img2.height * 0.4, img2.width * 0.4, img2.height * 0.4);
                }
                img2.src = event.target.result;
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    }