为什么来自 new Uint8ClampedArray 的 new ImageData 创建黑白图像

问题描述

我正在将 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);

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

这是最终的结果

解决方法

感谢@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);
ctx.drawImage(image2,0);

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