在JavaScript中合并两个图像

我试图将来自两个不同URL的两个图像合并为一个如下所示: 例

香草JS或任何节点库可以使用。 我没有在代码中的图像的经验,所以我不知道我在找什么,但它将不胜感激,如果提供了一个例子。 粗略的伪代码可能看起来像这样:

img1 = getImage("url") img2 = getImage("url") newImg = mask(img1, img2, args) return newImg //can be a Buffer, local path, or URL 

编辑 :我正在寻找这个在Node中运行,因为没有与DOM交互。

有可能是一个更简单的方法,但我希望它可以帮助。

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

您可以使用Canvas尝试以下解决scheme。

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