灰度化时如何在 canvas 中设置 Alpha 通道

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);
}

但是问题是，如果图片有白色背景，它会变成黑色。所以尝试了 data[i + 3] = 255; 的 alpha 通道，但这把整个 canvas 变成了黑色。

我做错了什么？

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

灰度化时如何在 canvas 中设置 Alpha 通道

how to set the alpha channel in canvas while grayscaling

html

javascript

canvas

grayscale