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