使用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

它应该有效。