Can you combine multiple images into a single one using JavaScript?

Question

I am wondering if there is a way to combine multiple images into a single image using only JavaScript. Is this something that Canvas will be able to do. The effect can be done with positing, but can you combine them into a single image for download?

Update Oct 1, 2008:

Thanks for the advice, I was helping someone work on a js/css only site, with jQuery and they were looking to have some MacOS dock-like image effects with multiple images that overlay each other. The solution we came up with was just absolute positioning, and using the effect on a parent <div> relatively positioned. It would have been much easier to combine the images and create the effect on that single image.

It then got me thinking about online image editors like Picnik and wondering if there could be a browser based image editor with photoshop capabilities written only in javascript. I guess that is not a possibility, maybe in the future?

Answer 1

I don't think you can or would want to do this with client side javascript ("combing them into a single image for download"), because it's running on the client: even if you could combine them into a single image file on the client, at that point you've already downloaded all of the individual images, so the merge is pointless.

Answer 2

If they were a pair of JPGs, under your control, with a size that is a multiple of 8 in both directions, probably. That would not require recoding, just reshuffling the pixel blocks.

Answer 3

Well, the problem is you cannot 'download' from JavaScript, it doesn't really make much sense, because JavaScript runs on the client, and it only makes sense to download from the server. Can you tell us what you are trying to achieve, your end goal? We might be able to come up with better suggestions.

Answer 4

I have a very concrete use case for this. Think of a web page where you want to dynamically generate an image lets say of a face by combining a number of "component pictures". One is the base shape, another one is the hairs, then the mouth, the eyes, etc. Is it possible to do this? I do not care of performance and yes, I know that it means that I have to load all of these images.

Answer 5

Guido: The easiest way to acheive your use case would be to composite a number of transparent PNGs, by overlaying each over the previous with z-index.

Answer 6

You can use Pixastic for this. The blend example is here: http://www.pixastic.com/lib/docs/actions/blend/