如何在灰度化时在画布中设置 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 通道，但这将整个画布变成了黑色。

我做错了什么？

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