how to merge Images and impose on each other

Question

Suppose I'm uploading two or more than two pics in some Framelayout. Hereby I'm uploading three pics with a same person in three different position in all those three pictures. Then what image processing libraries in Android or java or Native's are available to do something as shown in the pic.

I would like to impose multiple pictures on each other.

Something like these:-

One idea is to :

1. Do some layering in all those pictures and find mismatching areas in the pics and merge them.

How one can merge multiple picture with other? By checking the di-similarity and merge with each other?

Are there any Third party Api's or some Photoshop service which can help me in doing these kinda image processing?

Answer 1

In this case you are not just trying to combine the images. You really want to combine a scene containing the same object in different positions.

Therefore, it is not just a simple combination or an alpha compositve where the color of a given pixel in the output image is the sum of the value of this pixel in each image, divided by the number of images.

In this case, you might do:

1. Determine the scene background analysing the pixels that do not change considering multiple images.
2. Begin with the output image being just the background.
3. For each image, remove the background to get the desired object and combine it with the output image.

There is a Marvin plug-in to perform this task, called MergePhoto. The program below use that plug-in to combine a set of parkour photos.

import marvin.image.MarvinImage;
import marvin.io.MarvinImageIO;
import marvin.plugin.MarvinImagePlugin;
import marvin.util.MarvinPluginLoader;

public class MergePhotosApp {

public MergePhotosApp(){

    // 1. load images 01.jpg, 02.jpg, ..., 05.jpg into a List
    List<MarvinImage> images = new ArrayList<MarvinImage>();
    for(int i=1; i<=5; i++){
        images.add(MarvinImageIO.loadImage("./res/0"+i+".jpg"));
    }

    // 2. Load plug-in and process the image
    MarvinImagePlugin merge = MarvinPluginLoader.loadImagePlugin("org.marvinproject.image.combine.mergePhotos");
    merge.setAttribute("threshold", 38);

    // 3. Process the image list and save the output
    MarvinImage output = images.get(0).clone();
    merge.process(images, output);
    MarvinImageIO.saveImage(output, "./res/merge_output.jpg");
}

public static void main(String[] args) {
    new MergePhotosApp();
}
}

The input images and the output image are shown below.

Answer 2

You can overlay the images using openCV you can check at OpenCV and here or here

// Read the main background image
cv::Mat image= cv::imread("Background.png");
// Read the mans character image to be placed
cv::Mat character= cv::imread("character.png");
// define where you want to place the image
cv::Mat newImage;
//The 10,10 are the initial coordinates in pixels
newImage= image(cv::Rect(10,10,character.cols,character.rows));
// add it to the background, The 1 is the aplha values
cv::addWeighted(newImage,1,character,1,0,newImage);
// show result
cv::namedWindow("with character");
cv::imshow("with character",image);
//Write Image
cv::imwrite("output.png", newImage);

or you can create it as a watermark effect

Or you can try it in java like merging two images

try using this class

public class MergeImages {

public static void main(String[] args) {
    File inner = new File("Inner.png");
    File outter = new File("Outter.png");

    try {

        BufferedImage biInner = ImageIO.read(inner);
        BufferedImage biOutter = ImageIO.read(outter);

        System.out.println(biInner);
        System.out.println(biOutter);

        Graphics2D g = biOutter.createGraphics();
        g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.8f));
        int x = (biOutter.getWidth() - biInner.getWidth()) / 2;
        int y = (biOutter.getHeight() - biInner.getHeight()) / 2;
        System.out.println(x + "x" + y);
        g.drawImage(biInner, x, y, null);
        g.dispose();

        ImageIO.write(biOutter, "PNG", new File("Outter.png"));
    } catch (Exception e) {
        e.printStackTrace();
    }

}
}

Answer 3

Check the accepted answer here.

In above link there is merging of two images which is done by openCV sdk.

If you dont want to use openCV and just want to try with your self then you will have to play little with framlayout and with three imageview. Give options to user to select specific part of the image to show for all three images. So the selected part will be shown of the selected image. on this way you will get the result like above what you have said.

Hope you got my point. If not then let me know.

Enjoy coding... :)

Answer 4

I don't know if this will qualify to be in your definition of "natives", but there is the following .NET library that could help: http://dynamicimage.apphb.com/

If the library itself can give you want you want, then depending on your architecture you could set up a small ASP.NET site to do the image manipulation on the server.