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问题

回答

相关问题