HTML5畫布圖像緩存/ putImageData問題

Question

我正在使用HTML5畫布加載圖像的單個實例，然后我將其多次blit到一個畫布上。 圖像需要一些輕微的基於像素的操作才能對其進行自定義。 我最初的攻擊計划是加載圖像，將其blit到支持畫布，在其上繪制我的修改，然后抓取圖像數據並將其緩存以備將來使用。

這是我寫的一些代碼：

context.drawImage(img, 0, 0);
context.fillStyle = '#ffffff';
context.fillRect(0, 0, 2, 2);  // Draw a 2x2 rectangle of white pixels on the top left of the image

imageData = context.getImageData(0, 0, img.width, img.height);
cusomImage = imageData;

雖然這有效，但我注意到我的圖像（透明的PNG）不能保持透明度。 相反，當使用putImageData將其放置在我的前置畫布上時，它將以黑色背景呈現。 我如何保持透明度？

歡迎任何建議！

Answer 1

putImageData（）沒有按照你的預期做到： http ：//dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData（）直接覆蓋畫布的像素。 因此，如果您在同一畫布上繪制其他內容，它將不會“覆蓋”它，而是用它的像素替換該區域中畫布的像素。

我遇到了這個問題，終於找到了原因。

至於解決方案，我還沒有嘗試過，但它看起來很有希望： 為什么putImageData這么慢？

[編輯]：我測試了這個方法，它對我來說很好，我的數據現在正確顯示透明度。

Answer 2

畫布在創建后是黑色的。 首先使其透明：

context.fillStyle = 'rgba(0,0,0,0)';
context.fillRect(0, 0, width, height);