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（）直接覆盖画布的像素。因此，如果你在同一个画布上绘制其他东西，它将不会“覆盖”它，它将用它的像素替换该区域中画布的像素。

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

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

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

Answer 2

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

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

HTML5画布图像缓存/ putImageData问题

2 个答案: