Javascript 为什么来自新UINT8ClamperArray的新图像数据会创建黑白图像

我将两个图像拼接在一起，以创建一个图像。重叠可能是一个更好的术语。第一个图像如下所示

第二幅图如下所示：

在做了一些画布魔术之后，我能够使用两个画布元素覆盖最终图像，如下所示

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

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

设r，g，b，a；
设r，g，b，a；
让缝合的_数据=[]；
对于（设i=0；i+3

前台和后台都是使用内置于canvas API中的ctx.getImageData函数生成的图像数据。然后，我从一个新的uint8clampedaray重新创建一个新的图像数据，并将其输入到一个新的ImageData的构造函数中。结果正是我想要的，只是它只是黑白的！！！为什么RGB值不继续？？这对我来说没有意义，有人能解释一下为什么尽管我携带了图像数据，但它只保存为黑白

这是最终结果

---

多亏了@Mike'Pomax'Kamermans，我很快就解决了这个问题。我不知道这就是alpha通道的用途

---

为什么？您正在复制单个像素吗？只需使用

drawImage（）

和所需的x/y/宽度/高度绘制“头部”图像即可？这就是alpha通道的用途：因此，当您对图像进行分层时，正确的事情会发生=）由于两个图像的维度相同，我的直觉是drawImage或putImageData将覆盖下面的图像数据。我错了吗？我不知道这是迈克的阿尔法频道。你能给我指一些参考资料让我更好地了解alpha通道的用途吗？我希望能够阅读一些材料，以便更好地掌握这些概念；g=背景数据[i]等应为

r=background.data[i]；g=背景数据[i+1]等。这里的
r
、
g
和
b
都是相同的，只有红色通道值。令人震惊。谢谢凯伊多！！！！
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);