HTML5 画布图像缓存/putImageData 问题答案

【问题标题】：HTML5 canvas image caching/putImageData questionsHTML5 画布图像缓存/putImageData 问题
【发布时间】：2011-07-09 19:31:05
【问题描述】：

我正在使用 HTML5 画布加载图像的单个实例，然后我将其多次 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 将其放置到我的正面画布上时，它会以黑色背景呈现。如何保持透明度？

欢迎提出任何建议！

【问题讨论】：

为什么要抓取图像数据以备将来使用？当你需要绘制它时，你可以只使用 Canvas 本身：newContext.drawImage(oldCanvas, 0, 0); 我认为这样会更快并且可能使用更少的内存。
这不意味着我必须将每个位图绘制到它自己的画布上吗？我预计会有 5 到 10 个位图。这肯定不是最理想的吗？

标签： javascript html canvas getimagedata

【解决方案1】：

putImageData() 并没有按照您的预期： http://dropshado.ws/post/1244700472/putimagedata-is-a-complete-jerk

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

我遇到了这个确切的问题，终于找到了原因。

至于解决方案，我还没有尝试过，但看起来很有希望： Why is putImageData so slow?

[编辑]：我测试了这个方法，对我来说效果很好，我的数据现在可以正确显示透明度。

【讨论】：

【解决方案2】：

画布创建后是黑色的。首先使其透明：

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

【讨论】：