-1

我将 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 值不结转？这对我来说没有意义，有人可以解释为什么，尽管我携带了图像数据，但它只将其保存为黑白？

这是最终结果

在此处输入图像描述

4

1 回答 1

0

感谢@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);
于 2021-01-07T02:24:32.503 回答