在JavaScript中组合两个图像

我试图将来自两个不同URL的两个图像组合成一个如下所示的图像：

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

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

newImg = mask(img1, img2, args)

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

---

编辑：我希望它在节点中运行，就像在中不与DOM交互一样。

您可以使用Canvas尝试以下解决方案

var canvas = document.getElementById("canvas");
var myVar = canvas.getContext("2d");

var img1 = loadImage('anyURL1.png', myFunction);
var img2 = loadImage('anyURL2.jpg', myFunction);

var numberOfImages = 0;
function myFunction() {
    numberOfImages += 1;

    if(numberOfImages == 2) {
        myVar.drawImage(img1, 0, 0);

        myVar.globalAlpha = 0.5;
        myVar.drawImage(img2, 0, 0);
    }
}

function loadImage(src, onload) {
    var img = new Image();
    img.onload = onload;
    img.src = src;
    return img;
}

---

也许有一个更简单的方法，但我希望它能有所帮助

    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;
    }

var img1=新图像（）；
var img2=新图像（）；
img1.src=“img1.jpg”；
img2.src=“img2.jpg”；
函数imgMask（）{/*在加载两个图像时调用此函数*/
var combied_imgs=联合收割机（imgToData（img1）、imgToData（img2））；
var img3=数据输入模式（组合模式）；
文件.正文.附件（img3）；
}
函数imgToData（img）{/*从img中提取imgdata*/
var c=document.createElement（“画布”）；
var ctx=c.getContext（“2d”）；
c、 宽度=img.width；
c、 高度=img.高度；
ctx.drawImage（img，0,0）；
返回ctx.getImageData（0,0，c.宽度，c.高度）；
}
函数combine（a，b）{/*您的掩蔽参数*/
var c=a；
var比率=img1.宽度/img1.高度；
对于（var i=0；iy*比率）
c、 数据[i]=a.数据[i]；
其他的
c、 数据[i]=b.数据[i]；
}
返回c；
}
函数dataToImg（a）{/*img from imgdata*/
var c=document.createElement（“画布”）；
c、 宽度=a.宽度；
c、 高度=a.高度；
var ctx=c.getContext（“2d”）；
ctx.putImageData（a，0,0）；
var img=新图像（）；
img.src=c.toDataURL（）；
返回img；
}

这将混合两个图像，但我想TS需要屏蔽。这是一个提示。使用canvas

drawImage

他可以根据自己的需要准确地放置两个图像。此解决方案存在两个问题。首先，我使用的是node.js画布，而不是HTML文件，因此我必须使用node的方式生成一个画布，这一点我还在弄清楚。第二，这实际上是将图像合并在一起，看起来是这样的。您可以从Node.js调用imagemagick，可以吗？还有@c-smile，我如何将其转换为Javascript命令？我想这就是我想要的，但我不知道如何使用它。你需要它在浏览器或节点内工作吗？@TonyRaoulIscaros node