使用HTML5 canvas和getImageData的透明像素？

Question

在我的应用程序中,我需要获取一些图像,处理它们,并保存以供以后使用.所以我将它们绘制到临时画布上,然后使用getImageData函数.但在输出透明度丢失了......

这是我的代码:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

我image有一些透明像素,但在此之后没有透明像素imageData我怎样才能解决这个问题？

有没有办法将Html Image转换为ImageData,所以我可以处理它然后绘制到画布？

Answer 1

你的imageData应该包含alpha通道.

但是,putImageData将替换上下文中的像素值.它不会将它与上下文中像素的先前值合并,它将替换它.所以,您应该看到的是画布背后的像素(在大多数情况下,是html页面的body标签的像素颜色).

你要做什么:

• 使用临时画布获取图像数据是一种好方法
• 根据需要修改imageData
• 不要尝试将此imageData放回使用putImageData的conetext中,它将不会按您的意愿运行
• 但创建一个新的Image对象,并将imageData作为源(是的,它工作:))
• 使用drawImage绘制图像

代码示例:

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

//modify here the imageData as you need

var img = new Image();
img.src = imageData;
context.drawImage(img, 0, 0); //the true context of the canvas

它应该有效.