如何在客戶端使用JavaScript將2個PNG圖像合併爲1？

Question

所以我的客戶端代碼收到兩個PNG圖像。其中一個是半透明的。如何將第一張圖片與第二張圖片重疊並將其轉換爲第三張PNG文件以便稍後使用它？ 它像使用它們作爲圖層來製作1個PNG圖像。 有沒有辦法做到這一點或任何框架？

Answer 1

其真的是容易做到。您只需使用drawImage即可將圖像分層繪製到畫布上。至於保存，你使用toDataURL這將返回一個base64網址的圖像，然後你可以做任何事情，在新窗口打開等。但圖像必須來自代碼運行的域以便獲取數據url，否則將拋出安全異常。 jsfiddle示例會拋出安全異常，因爲我只是將兩個隨機網站中的圖像作爲示例。

var canvas = document.getElementById("canvas"), 
    ctx = canvas.getContext("2d"), 
    image = document.getElementsByTagName("img"); 

canvas.width = 400; 
canvas.height = 400; 
ctx.drawImage(image[0],0,0); 
ctx.drawImage(image[1],0,0); 

// will raise security exception if not from the same domain as the code. 
var newImage = canvas.toDataURL(); 
​ 

Live Demo

Answer 2

Pixastic是一個JavaScript庫，它允許您使用一點JavaScript對圖像執行各種操作，濾鏡和幻想效果。要了解有關該庫的更多信息，請參閱introduction page。

CamanJS的主要焦點是使用HTML5畫布和Javascript處理圖像。它結合了簡單易用的界面和先進而高效的圖像/畫布編輯技術。它也完全獨立於圖書館，可以安全地使用在jQuery，YUI，Scriptaculous，MooTools等旁邊。