8

在我的应用程序中，我需要获取一些图像，对其进行处理，然后保存以备后用。所以我将它们绘制到一个临时画布上，然后使用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，所以我可以处理它然后绘制到画布上？

4

1 回答 1

10

你的 imageData 应该包含 alpha 通道。

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

你必须做的：

  • 使用临时画布获取图像数据是好方法
  • 根据需要修改 imageData
  • 不要尝试使用 putImageData 将此 imageData 放回 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

它应该有效。

于 2013-03-10T16:53:07.023 回答