HTML5画布图像缓存/putImageData问题

Question

我正在使用HTML5画布来加载一个图像实例，然后将其多次贴到单个画布上。为了定制它，这张图片需要进行一些轻微的像素操作。我的初始解决方案是加载图像，将其贴到备份画布上，在其上绘制我的修改，然后获取图像数据并缓存以备将来使用。

以下是我编写的一些代码：

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将其放置在我的前置画布上时，它会呈现为黑色背景。如何保持透明度？

欢迎任何建议！

- ndg

---

为什么要获取图像数据以供将来使用？当您需要绘制时，可以直接使用Canvas本身：newContext.drawImage(oldCanvas, 0, 0); 我认为这样会更快，并且可能会使用更少的内存。 - andrewmu

这是否意味着我必须将每个位图绘制到其自己的单独画布上？我预计会有5到10个位图。这肯定不是最优解吧？ - ndg

Answer 1

putImageData()并不像你最初想象的那样工作：

http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

putImageData()直接覆盖画布的像素。因此，如果在同一画布上绘制其他内容，则不会“覆盖”它，而是用其像素替换画布区域中的像素。

我遇到了这个问题，并最终找到了原因。

至于解决方案，我还没有尝试过，但它似乎很有前途： Why is putImageData so slow?

[编辑]: 我测试了这种方法，它对我来说可以正常工作，我的数据现在正确显示透明度。

- Ryan Badour

Answer 2

创建后，画布是黑色的。首先使用以下方法使其透明：

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

- Torsten Becker