使用HTML5画布和getImageData的透明像素

Transparent pixels using HTML5 canvas and getImageData?

本文关键字：透明 像素 getImageData HTML5 使用      更新时间：2024-01-01

在我的应用程序中，我需要获取一些图像，处理它们，并保存以备将来使用。所以我将它们绘制到一个临时画布上，然后使用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图像转换为ImageData，这样我就可以处理它，然后绘制到画布上？

您的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

它应该有效。

相关文章：