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这么慢？

[编辑]:我测试了这个方法,它对我来说很好,我的数据现在正确显示透明度.