HTML5畫布圖像緩存/ putImageData問題

我使用HTML5畫布加載圖像的單個實例，然後我多次在單個畫布上進行多次佈局。該圖像需要一些基於像素的輕微操作才能對其進行自定義。我最初的攻擊計劃是加載圖像，將其粘貼到背景畫布上，在其上繪製我的修改，然後獲取圖像數據並將其緩存以供將來使用。HTML5畫布圖像緩存/ putImageData問題

下面是一些代碼，我已經寫了該效果：

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將其放在我的前置畫布上時，它會以黑色背景呈現。我如何保持透明度？

歡迎任何建議！

來源

2011-03-06 ndg

爲什麼抓取圖像數據以備將來使用？您可以在需要繪製時使用Canvas本身：'newContext.drawImage（oldCanvas，0，0）;'我認爲這會更快並且可能使用更少的內存。 – andrewmu 2011-03-07 15:11:00

這並不意味着我必須將每個位圖繪製到它自己的畫布上嗎？我期待着5到10位圖之間的任何地方。當然，這不是最佳？ – ndg 2011-03-07 16:47:11

putImageData（）不會做什麼，你可能首先想到：在畫布上的 http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData（）直接覆蓋的像素。因此，如果您在同一個畫布上繪製其他畫布，則不會「畫出」它，而是將其替換爲該區域中的畫布像素。

我遇到了這個確切的問題，並最終找出原因。

至於解決的辦法，我沒有試過還，但它似乎有希望： Why is putImageData so slow?

[編輯]：我測試了這種方法，它爲我工作得很好，現在我的數據顯示透明度正確。

來源

2011-04-12 02:25:57

畫布在創建後是黑色的。使它透明先用：

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

來源

2011-03-14 08:59:08 noiv

HTML5畫布圖像緩存/ putImageData問題

回答

相關問題