为什么 new Uint8ClampedArray 的 new ImageData 会创建黑白图像答案

【问题标题】：Why does new ImageData from new Uint8ClampedArray create a black and white image为什么 new Uint8ClampedArray 的 new ImageData 会创建黑白图像
【发布时间】：2021-01-07 02:11:28
【问题描述】：

我将 2 个图像拼接在一起以创建一个图像。叠加可能是一个更好的术语。第一张图如下。

第二张图片如下：

在做了一些画布魔术之后，我可以使用两个像这样的画布元素覆盖最终图像

然后我抓取两个图像的图像数据并将图像数据“缝合”在一起，以使用以下技术将 2 个画布元素叠加到单个画布中重新创建单个图像的错觉

let r, g, b, a;
let r_, g_, b_, a_;

let stitched_data = [];

for (let i = 0; i + 3 < background.data.length; i += 4) {
  r = background.data[i];
  g = background.data[i];
  b = background.data[i];
  a = background.data[i];

  r_ = foreground.data[i];
  g_ = foreground.data[i];
  b_ = foreground.data[i];
  a_ = foreground.data[i];

  let _r, _g, _b, _a;

  if (a_ != 0) {
    console.log(a, a_);
    _r = r_;
    _g = g_;
    _b = b_;
    _a = 255;
  } else {
    _r = r;
    _g = g;
    _b = b;
    _a = 255;
  }

  if(_r)

  stitched_data.push(_r);
  stitched_data.push(_g);
  stitched_data.push(_b);
  stitched_data.push(_a);
}

let stitched = Uint8ClampedArray.from(stitched_data);
let stiched_ = new ImageData(stitched, canvas.width, canvas.height);
ctx.putImageData(stiched_, 0, 0);

前景和背景都是使用画布 API 中内置的 ctx.getImageData 函数的 ImageData。然后，我从新的 Uint8ClampedArray 重新创建新的图像数据，并将其输入到新 ImageData 的构造函数中。结果正是我想要的，除了它只有黑白！为什么不保留 RGB 值？这对我来说没有意义，有人可以解释为什么尽管我携带了图像数据，但它只将其保存为黑白？？

这是最终结果

【问题讨论】：

为什么...您要复制单个像素？只需使用您需要的 x/y/width/height 用 drawImage() 绘制“头部”图像？这就是 Alpha 通道用于的原因：因此，当您对图像进行分层时，会发生正确的事情 =)
由于两个图像的尺寸相同，我的直觉是drawImage或putImageData会覆盖下面的图像数据。我错了吗？
我不知道这就是 Mike 的 Alpha 通道。您能否指出一些资源，以便我更好地了解 Alpha 通道的用途？我希望能够阅读一些材料，以便更好地掌握这些概念。
错字：r = background.data[i]; g = background.data[i]; 等应该是r = background.data[i]; g = background.data[i+1]; 等这里r,g 和b 都是相同的，只有红色通道值。
疯了。谢谢凯多！！！！

标签： javascript canvas pixel getimagedata uint8array

【解决方案1】：

感谢@Mike 'Pomax' Kamermans，我能够很快解决这个问题。我不知道这就是 Alpha 通道用于

var image1 = new Image();
image1.src = background_canvas.toDataURL();

var image2 = new Image();
image2.src = foreground_canvas.toDataURL();

ctx.drawImage(image1, 0, 0);
ctx.drawImage(image2, 0, 0);

return document.querySelector("body").appendChild(canvas);

【讨论】：