你可以结合使用JavaScript的多个图像到一个单一的？

我想知道是否有一种方法可以仅使用JavaScript将多个图像组合成单个图像。这是Canvas能够做的事情吗？效果可以通过定位完成，但是您可以将它们组合成单个图像进行下载吗？你可以结合使用JavaScript的多个图像到一个单一的？

更新2008年10月1日：

谢谢你的建议，我帮助上一个JS/CSS的唯一网站的人工作，与jQuery和他们希望有一些MacOS的码头般的图像效果多个图像相互重叠。我们提出的解决方案只是绝对的定位，并使用相对定位的父母<div>的效果。将图像合并起来并在单个图像上创建效果会容易得多。

然后，它让我想到像Picnik这样的在线图像编辑器，并想知道是否可以使用基于浏览器的图像编辑器来编写只有JavaScript编写的photoshop功能。我想这不是一种可能性，也许在将来呢？

来源

2008-10-01 Steve Tranby

我知道这是一个老问题，OP找到了一个解决方法，但是如果图像和画布已经是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'); 
Image img1 = new Image(); 
Image 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>

来源

2013-04-16 02:54:23 mikeslattery