Question

我需要拍摄两张图片（通过网址输入提供）并输出如下内容：

我正在使用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

~~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中的图片：

将两个图像合二为一

2 个答案: