你可以結合使用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