将两个图像组合成一个

我需要采取两个图像（通过URLinput），并输出如下所示：

我正在使用Jimp来生成图像。 这应该是一个相对简单的事情做一个面具。 对于我的项目，我不能使用canvas，所以如果你有例子，尽量不包括DOM。 这是我要去的：

const jimp = require("jimp") const split = (url1, url2) => { jimp.read(url1, (err, image) => { //mask //paste image from url2 //return new image }) } 

Answer 1

下面的例子演示了如何使用MarvinJ来做到这一点 。

input图像A：

input图像B：

组合：

 var canvas = document.getElementById("canvas"); // Image A var imageA = new MarvinImage(); imageA.load("https://i.imgur.com/FLaixrz.jpg", imageLoaded); // Image B var imageB = new MarvinImage(); imageB.load("https://i.imgur.com/ayVZfpF.jpg", imageLoaded); var loadedImages=0; function imageLoaded(){ if(++loadedImages == 2){ var imageOut = new MarvinImage(imageA.getWidth(), imageA.getHeight()); var end=imageA.getWidth(); var step = imageA.getWidth()/imageA.getHeight(); for(var y=0; y<imageA.getHeight(); y++){ for(var x=0; x<imageA.getWidth(); x++){ if(x < end){ imageOut.setIntColor(x,y,imageA.getIntColor(x,y)); } else{ imageOut.setIntColor(x,y,imageB.getIntColor(x,y)); } } end -= step; } imageOut.draw(canvas); } } 

 <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> <canvas id="canvas" width="400" height="300"></canvas> 

Answer 2

jimp有一个mask()函数。 其实，这会给你你想要的对angular线：

 "use strict"; const Jimp = require("jimp"), util = require("util"); const jreadAsync = util.promisify(Jimp.read), jwriteAsync = util.promisify(Jimp.prototype.write); const filesToRead = [ "https://www.example.com/image1", "https://www.example.com/image2" ]; Promise .all(filesToRead.map(img => jreadAsync(img))) .then((res) => { let [ image1, image2 ] = res; image1.scan(0, 0, image1.bitmap.width, image1.bitmap.height, (x, y, idx) => { if ((image1.bitmap.width - x) > y) { return; } image1.setPixelColor(image2.getPixelColor(x, y), x, y); }); return jwriteAsync.call(image1, `out.${image1.getExtension()}`); }) .catch(console.error); 

这是使用GabrielAmbrósioArchanjo的答案 ：