将两张图片合二为一答案

【问题标题】：Combining two images into one将两张图片合二为一
【发布时间】：2017-11-17 00:52:27
【问题描述】：

我需要拍摄两张图像（通过 URL 输入给出）并输出如下所示的内容：

我正在使用Jimp 生成图像。这应该是一个相对简单的事情来做一个面具。对于我的项目，我不能使用画布，因此如果您有示例，请尽量不包含 DOM。这就是我想要的：

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

【问题讨论】：

我认为你来错地方了。这不是免费的编码服务。我相信您会找到很多愿意为您提供帮助的软件公司。

标签： javascript node.js image-processing

【解决方案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>

【讨论】：

好答案。我使用 jimp 添加了一个答案，因为 OP 说他们正在使用该库并且需要一种没有<canvas> 的方法。

【解决方案2】：

~~jimp 有一个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的图片：

【讨论】：