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 know this is an old question and the OP found a workaround solution, but this will work if the images and canvas are already part of the HTML page.

<img id="img1" src="imgfile1.png">
<img id="img2" src="imgfile2.png">
<canvas id="canvas"></canvas>

<script type="text/javascript">
var img1 = document.getElementById('img1');
var img2 = document.getElementById('img2');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = img1.width;
canvas.height = img1.height;

context.globalAlpha = 1.0;
context.drawImage(img1, 0, 0);
context.globalAlpha = 0.5; //Remove if pngs have alpha
context.drawImage(img2, 0, 0);
</script>

Or, if you want to load the images on the fly:

<canvas id="canvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img1 = new Image();
var img2 = new Image();

img1.onload = function() {
    canvas.width = img1.width;
    canvas.height = img1.height;
    img2.src = 'imgfile2.png';
};
img2.onload = function() {
    context.globalAlpha = 1.0;
    context.drawImage(img1, 0, 0);
    context.globalAlpha = 0.5; //Remove if pngs have alpha
    context.drawImage(img2, 0, 0);
};        

img1.src = 'imgfile1.png';
</script>

Answer 2

我不认为您可以或不希望使用客户端javascript（“将它们合并到一个图像中进行下载”），因为它在客户端上运行：即使您可以将它们合并为一个单独的图像文件，客户端，此时您已经下载了所有单个图像，因此合并毫无意义。

Answer 3

MarvinJ provides the method combineByAlpha() in which combines multiple images using its alpha channel. Therefore, you just need to have your images in a format that supports transparency, like PNG, and use that method, as follow:

Marvin.combineByAlpha(image, imageOver, imageOutput, x, y);

image1:

image2:

image3:

Result:

Runnable Example:

 var canvas = document.getElementById("canvas"); image1 = new MarvinImage(); image1.load("https://i.imgur.com/ChdMiH7.jpg", imageLoaded); image2 = new MarvinImage(); image2.load("https://i.imgur.com/h3HBUBt.png", imageLoaded); image3 = new MarvinImage(); image3.load("https://i.imgur.com/UoISVdT.png", imageLoaded); var loaded=0; function imageLoaded(){ if(++loaded == 3){ var image = new MarvinImage(image1.getWidth(), image1.getHeight()); Marvin.combineByAlpha(image1, image2, image, 0, 0); Marvin.combineByAlpha(image, image3, image, 190, 120); image.draw(canvas); } } 

 <script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script> <canvas id="canvas" width="450" height="297"></canvas>