Question

我正在使用HTML canvas来对图像进行灰度图像处理，我不想仅对其进行平均处理。所以我使用这个功能

  var imageData = ctx.getImageData(0,0,canvas.width, canvas.height);
  var data= imageData.data
    for (var i = 0; i < data.length; i += 4) {
      var grayscale = (data[i]*0.2126 + data[i +1]*0.7152 + data[i +2])*0.0722;
      data[i]     = grayscale; // red
      data[i + 1] = grayscale; // green
      data[i + 2] = grayscale; // blue
    }
    ctx.putImageData(imageData, 0, 0);
}

但问题是，如果图片有白色背景，它将变成黑色。因此对于alpha通道尝试data[i + 3] = 255;但是将整个画布变为黑色。

我做错了什么？

Answer 1

问题出在这一行：

var grayscale = (data[i]*0.2126 + data[i +1]*0.7152 + data[i +2])*0.0722;

请注意，最后一个常量将整个表达式与其左侧相乘，而它只应乘以data[i+2]：

var grayscale = data[i]*0.2126 + data[i + 1]*0.7152 + data[i + 2]*0.0722;

jsfiddle

如何在灰度化时在画布中设置alpha通道

1 个答案: