Dynamically add multiple images from input

Question

I have the following code:

      var imageLoader = document.getElementById('imageLoader');
    var patternLoader = document.getElementById("patternLoader");
    var canvas = document.getElementById('imageCanvas');
    var ctx = canvas.getContext('2d');


  function handleImage(e) {
      var reader = new FileReader();
      reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
      }
      reader.readAsDataURL(e.target.files[0]);
    };

    imageLoader.addEventListener("change", handleImage, false);
    patternLoader.addEventListener("change", handleImage, false);

How can I load one image over another from inputs and not replace them?

I want it to be like that http://i.gyazo.com/85c8c6bdcd2efcdd6a1c1b156000f204.png

You want the two images drawn on the canvas to be considered as two objects on your canvas? — Niddro
– Niddro, Commented Jul 6, 2015 at 12:36
i want it to be like that i.gyazo.com/85c8c6bdcd2efcdd6a1c1b156000f204.png — Revels
– Revels, Commented Jul 6, 2015 at 12:37
Do you want the new image always on top and that the canvas' size adjusts to the largest image? — Niddro
– Niddro, Commented Jul 6, 2015 at 12:43
I just want to dynamically load multiple images to canvas from inputs. — Revels
– Revels, Commented Jul 6, 2015 at 12:44
What kind of DOM elements are imageLoader and patternLoader? — Niddro
– Niddro, Commented Jul 6, 2015 at 12:48

Niddro · Accepted Answer · 2015-07-06 13:07:28Z

1

Here's a crude way to add images dynamically. Declare an array to keep track on all your images and scale the canvas based on the largest image.

Since I didn't konw what kind of DOM elements the OP used for "imageLoader" and "patternLoader", I simply used an <input>-tag.

Just keep pasting URLs for images to add images to your canvas. The images will be drawn in the order as you add them.

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var maxWidth = 0;
var maxHeight = 0;
var images = [];

var myInput = document.getElementById("myInput");
myInput.addEventListener('change',handleImage,false);

function handleImage(e) {
    var myImage = new Image();
    myImage.onload = function () {   
        if (myImage.width > maxWidth) {
            maxWidth = myImage.width;
        }
        if (myImage.height > maxHeight) {
            maxHeight = myImage.height;
        }
        canvas.width = maxWidth;
        canvas.height = maxHeight;
        images.push(myImage);
        drawImages();
    }
    myImage.src = e.target.value;
}

function drawImages() {
    for (var i = 0; i<images.length; i++) {
        ctx.drawImage(images[i],canvas.width/2-images[i].width/2,canvas.height/2-images[i].height/2);
    }
}

<input type="text" id="myInput"><br />
<canvas id="canvas"></canvas>

answered Jul 6, 2015 at 13:07

Niddro

1,7252 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Revels Over a year ago

i'm using input[type="file"] elements and it gives me an error when i try to upload file Not allowed to load local resource: file:///C:/fakepath/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg

Niddro Over a year ago

Ah yes, see that information could have been useful in your question since that changes things a bit. My answer is not really applicable to local files (although you can still use the way of thinking with a global variable for the images and my drawImages() function). See this perhaps html5rocks.com/en/tutorials/file/dndfiles

Collectives™ on Stack Overflow

Dynamically add multiple images from input

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related