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

它应该有用。

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

1 个答案: