在JavaScript中合并两个图像

Question

我正在尝试将两个不同网址中的两个图片组合成一个如下所示：

可以使用Vanilla JS或任何节点库。我没有代码中的图像经验，所以我不确定我在寻找什么，但如果提供一个例子，将非常感激。粗略的伪代码可能如下所示：

img1 = getImage("url")
img2 = getImage("url")

newImg = mask(img1, img2, args)

return newImg //can be a Buffer, local path, or URL

编辑：我正在寻找这个在Node中运行，就像没有与DOM交互一样。

Answer 1

可能有一种更简单的方法，但我希望它有所帮助。

    var img1 = new Image();
    var img2 = new Image();
    img1.src = "img1.jpg";
    img2.src = "img2.jpg";
    function imgMask(){ /*call this when both images loaded */
        var combied_imgs = combine(imgToData(img1),imgToData(img2));
        var img3 = dataToImg(combied_imgs);
        document.body.append(img3);
    }

    function imgToData(img){ /* Extract imgdata from img */
        var c=document.createElement("canvas");
        var ctx=c.getContext("2d");
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img,0,0);
        return ctx.getImageData(0,0,c.width,c.height);
    }

    function combine(a,b){ /* your masking argument */
        var c = a;
        var ratio =  img1.width/img1.height;
        for (var i = 0; i < a.data.length; i++) {
            var y = (i/4)/c.width;
            var x = (i/4)%c.width; 
            if (x > y*ratio)
                c.data[i] = a.data[i];
            else
                c.data[i] = b.data[i];
        }
        return c;
    }
    function dataToImg(a){ /*img from imgdata */
        var c=document.createElement("canvas");
        c.width = a.width;
        c.height = a.height;
        var ctx = c.getContext("2d");
        ctx.putImageData(a,0,0);
        var img = new Image();
        img.src = c.toDataURL();
        return img;
    }