javascript - 您可以使用 JavaScript 将多张图片组合成一张图片吗？

Question

我想知道是否有一种方法可以仅使用 JavaScript 将多个图像组合成一个图像。这是 Canvas 能够做到的事情吗？效果可以用positing来做，但是能不能把它们组合成一张图片下载呢？

2008 年 10 月 1 日更新:

感谢您的建议，我正在帮助某人使用 jQuery 在仅 js/css 的网站上工作，他们希望有一些类似 MacOS dock 的图像效果，其中多个图像相互叠加。我们提出的解决方案只是绝对定位，并在父级上使用效果 <div>相对定位。组合图像并在单个图像上创建效果会容易得多。

这让我想到了像 Picnik 这样的在线图像编辑器并想知道是否可以有一个基于浏览器的图像编辑器，它具有只用 javascript 编写的 photoshop 功能。我想这不太可能，也许在未来？

Answer 1

我知道这是一个老问题，OP 找到了一个变通解决方案，但如果图像和 Canvas 已经是 HTML 页面的一部分，这将起作用。

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

或者，如果您想动态加载图像:

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