两个图像结合到一个

Question

我需要两个图像（通过URL输入给出）和输出的东西，看起来像这样：

我使用Jimp生成图像。这应该是一个相对简单的事情做一个面具。对于我的项目，我不能使用画布，所以如果您有示例，请尝试不包含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。

输入图像A：

输入图像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

服从跳具有 mask()功能。 其实，这会给你的对角线要：

"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); 

这是通过使用从Gabriel Ambrósio Archanjo's answer图像：