Upload two images into html5 canvas

Question

I am trying to upload two and more images into one canvas and make some sort of collage. Pictures are the same size. However, when I try upload the second image, the first one disappears. Below there is the code and example to JSfiddle. What is wrong? jsfiddle

<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>

And JS code:

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]);
    }
}

The idea was taken here: How to upload image into HTML5 canvas

You are currently setting position of second image in `canvas` to same position of first image, see http://stackoverflow.com/questions/36880509/cant-download-canvas-content/ — guest271314, Aug 09 '16 at 20:23

Ravi Shankar Bharti · Answer 1 · 2016-08-09T20:35:33.827

When you are trying to superimpose multiple images in single canvas,You need to use two distinct paths, also you need to clearly circumscribe them with the .beginPath() method.

I have modified you code, please check. It should work for you.

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;
                //added begin path here
                ctx.beginPath();
                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;
                //added begin path here
                ctx.beginPath();
                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]);
    }
}

Alternate :

Or what you can do is use globalAlpha property of canvas.

Try : ctx.globalAlpha = 0.5; .This may solve your issue.

Alternate 2:

You can use multiple canvas layer for multiple images. This will directly superimpose your images. You can superimpose as many images as you want.

score 0 · Answer 2 · answered Aug 03 '20 at 20:22

I've modified original jsfiddle: click.

Here what have been changed:

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');
let z = 0.4; // zoom

canvas.width = 1000;
canvas.height = 500;

function handleImage(e) {
  if (e.target == imageLoader1) {
    let img = new Image();
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * z, img.height * z);
    }
  }

  if (e.target == imageLoader2) {
    let img = new Image();
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
      ctx.drawImage(img, 0, 0, img.width, img.height, img.width * z, img.height * z, img.width * z, img.height * z);
    }
  }
}

I've moved canvas initialization out of load handler and simplified the loader.

This solution will not superimpose your images (but this is just a fix for original jsfiddle from the Question).

Upload two images into html5 canvas

2 Answers2