How To Create An Image Generator For Combining Multiple Images?

I am working on an image generator using HTML5 canvas and jQuery/JS. What I want to accomplish is the following. The user can upload 2 or max 3 images (type should be png or jpg)

Solution 1:

Have a look at the updated jsFiddle, is that what you wanted?

Have a look here regarding image rotation

Updated jsFiddle, drawing multiple images.

Notice:

1. The save script was just a lazy way to make sure I've got the external scripts loaded before I save the merged_image...
2. There is no synchornisation in the sample script, notice that addToCanvas was called on image loaded event, there could be a race condition here (but I doubt it, since the image is loaded to memory on client-side)

functionaddToCanvas(img) {
    // resize canvas to fit the image// height should be the max width of the images added, since we rotate -90 degree// width is just a sum of all images' height
    canvas.height = max(lastHeight, img.width);
    canvas.width = lastWidth + img.height;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (lastImage) {
        ctx.drawImage(lastImage, 0, canvas.height - lastImage.height);
    }
    
    ctx.rotate(270 * Math.PI / 180); // rotate the canvas to the specified degrees
    ctx.drawImage(img, -canvas.height, lastWidth);
    
    lastImage = newImage();
    lastImage.src = canvas.toDataURL();
    lastWidth += img.height;
    lastHeight = canvas.height;
    imagesLoaded += 1;
}

PS: I've added some script to download the merged image, but it would fail. The error message was: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

I've done a quick Google search and it seemed to be related to Cross-origin resources. I assumed that it wouldn't be an issue with FileReader. I haven't had time to test that so please test it (and please let me know :)It works with FileReader!

Solution 2:

You can use toDataURL. But in this way user must do something like Save image as...

var img = canvas.toDataURL("image/png");

And then set for example img result src:

$("#result").attr("src",img);

Solution 3:

Canvas is already an Image.

The canvas and img are interchangeable so there is no need to add the risky step of canvas.toDataURL which can fail depending on the image source domain. Just treat the canvas as if it were and img and put it in the DOM. Converting to a jpg does not save space (actually a resource hungry operation) as the an img needs to be decoded before it can be displayed.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.height = 400;
canvas.width = 800;
document.body.appendChild(canvas);  // add to the end of the document// or add it to a containing elementvar container = document.getElementById("containerID"); // or use JQueryif(container !== null){
    container.appendChild(canvas);
}