使用Javascript合并/合并画布的重叠部分

我正在尝试将画布的重叠部分与画布的其余部分合并/组合。为此，我将图像拖放到具有透明背景的画布上。我放置图像的方式使它们的公共部分重叠。现在，我需要合并重叠部分，这样它必须看起来像单个图像，并且必须看起来像图像的其他部分。 我尝试了下面链接中给出的混合技术，但未能获得所需的输出

我使用一个按钮来合并画布的重叠部分

<button id="applyPanoBtn">Merge</button>

合并

这是我在JavaScript中的点击事件

applyPanoBtn?.addEventListener("click", function () {
    var bCanvas = document.getElementById("panoramaCanvas");
    var bCtx = bCanvas.getContext("2d");
    var bData = bCtx.getImageData(0, 0, bCanvas.width, bCanvas.height);
    var data = bData.data;
   
    // Increasing opacity of image
    for (let i = 0; i < data.length; i = i + 4) {
        data[i + 3] = 255;
    }

    var pixels = 4 * bCanvas.width * bCanvas.height;  

    while (pixels--) {
        data[pixels] = data[pixels] * 0.5 + data[pixels] * 0.5;
    }
    // Blending technique
    bData.data = data;
    bCtx.putImageData(bData, 0, 0);
});

applyPanoBtn？.addEventListener（“单击”，函数）（）{
var bCanvas=document.getElementById（“全景画布”）；
var bCtx=bCanvas.getContext（“2d”）；
var bData=bCtx.getImageData（0,0，bCanvas.width，bCanvas.height）；
var data=bData.data；
//增加图像的不透明度
对于（设i=0；i

以下是我的图像源和输出：

正如您可以在输出图像中看到的，重叠部分看起来与画布部分的其余部分不同，它看起来像图像的独立部分。我尝试将重叠部分与图像的其余部分合并，使其看起来像单个图像，但没有得到正确的结果

---

是否有任何算法或其他方法可以实现该输出？

您是否尝试过使用合成？您可以在这里找到更多信息：@ViniDalvino是的，但我需要合并重叠部分，使其看起来与图像的其余部分相似。