Combining two images into one

user_4979586 0
Viewed 1787

I need to take two images (given through URL inputs) and output something that looks like this:

Example

I'm using Jimp to generate the image. This should be a relatively simple thing to do with a mask. For my project, I cannot use the canvas so if you have examples, try to not include the DOM. This is what i'm going for:

const jimp = require("jimp")
const split = (url1, url2) => {
    jimp.read(url1, (err, image) => {
    //mask
    //paste image from url2
    //return new image
    })
}
node.js image-processing javascript
2 Answers

The example below demonstrates how to do that using MarvinJ.

Input Image A:

enter image description here

Input Image B:

enter image description here

Combination:

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>

user_24205990

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

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

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

Blitted image

user_6917110
Related