在 html 画布中分离颜色通道并对其进行灰度化答案

【问题标题】：Separating color channels and greyscaling them after in html canvas在 html 画布中分离颜色通道并对其进行灰度化
【发布时间】：2015-08-26 21:51:46
【问题描述】：

我正在尝试构建类似this 或this 的东西。为了减小文件大小，我想在颜色通道上分离然后对其进行灰度化，类似于Imagickconvert rose: -channel R -separate separate_red.gif中的通道分离命令

所以我的代码看起来像这样

var imageData = ctx.getImageData(0,0,cw, ch);
  var data= imageData.data

    for (var i = 0; i < data.length; i += 4) {

      data[i]     = 0; // red
      data[i + 2] = 0; // blue

    }

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

在第一个for 循环中，我抓取绿色通道，然后在第二个循环中对其进行灰度化。

这适用于具有透明背景的 png，但是如果它们具有白色背景，它们会变成深灰色。我该如何关闭它？阿尔法通道有问题吗？

提前致谢

【问题讨论】：

第一个循环毫无意义。只是不要将 data[i] 和 data[i + 2] 添加到您的灰度公式中
所以你的意思是像这样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 + 1] = grayscale; // green } ？因为那会给我的图片比灰色更蓝
我的意思是你根本不需要第一个循环来计算你的 grayscale 值（不是指这个值的“正确性”，只是它的计算方式） .你可以简单地做grayscale = data[i + 1] * 0.7152。关于计算部分，你可能想看here
好吧，我不明白，如果我这样做for (var i = 0; i < data.length; i += 4) { var grayscale = data[i +1]*0.7152; data[i] = grayscale; data[i + 1] = grayscale; data[i + 2] = grayscale; } 白色背景仍然是灰色的，我是否应该用第二个循环遍历它并将所有纯灰色 (182,182,182)变回白色 (255,255,255)？

标签： html canvas colors

【解决方案1】：

考虑源图像中完全不透明的白色像素。它将具有以下值：

R = 255
G = 255
B = 255
A = 255

如果你将 R&B 截断为 0，然后使用 G 的 0.7152 将每个通道设置回来，你会得到：

R = 182
G = 182
B = 182
A = 255

那是灰色的。

如果你想要白色，你需要不同的逻辑。

【讨论】：