Combining Two Images Into One

I need to take two images (given through URL inputs) and output something that looks like this: I'm using Jimp to generate the image. This should be a relatively simple thing to d

Solution 1:

The example below demonstrates how to do that using MarvinJ.

Input Image A:

Input Image B:

Combination:

var canvas = document.getElementById("canvas");

// Image Avar imageA = newMarvinImage();
imageA.load("https://i.imgur.com/FLaixrz.jpg", imageLoaded);
// Image Bvar imageB = newMarvinImage();
imageB.load("https://i.imgur.com/ayVZfpF.jpg", imageLoaded);

var loadedImages=0;
functionimageLoaded(){

  if(++loadedImages == 2){
    var imageOut = newMarvinImage(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);
  }
}

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

Solution 2:

jimp has a mask() function. Actually, this will give you the diagonal that you want:

"use strict";

constJimp = 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);

This is using the images from Gabriel Ambrósio Archanjo's answer: