在html画布之后分离颜色通道并对它们进行灰度化

Question

我正在尝试构建类似this或this的内容。为了减少我希望在colorchannel上分离的文件大小，然后对其进行灰度化，类似于Imagick convert 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，但如果它们具有白色背景，则会变成深灰色。我怎么把它关掉？这是alphachannel有问题吗？

提前致谢