将两个图像合并为一个 [英] Combining two images into one

问题描述

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

我正在使用

输入图片B:

组合:

  var canvas = document.getElementById("canvas");//图片Avar imageA = new MarvinImage();imageA.load("https://i.imgur.com/FLaixrz.jpg"，imageLoaded);//图片Bvar imageB = new MarvinImage();imageB.load("https://i.imgur.com/ayVZfpF.jpg"，imageLoaded);var loadingImages = 0;函数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));} 别的{imageOut.setIntColor(x，y，imageB.getIntColor(x，y));}}结束-=步骤;}imageOut.draw(画布);}}  

 <脚本src ="https://www.marvinj.org/releases/marvinj-0.7.js"></脚本>< canvas id ="canvas" width ="400" height ="300"></canvas>  

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 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
    })
}

解决方案

The example below demonstrates how to do that using MarvinJ.

Input Image A:

Input Image B:

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>

这篇关于将两个图像合并为一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！