fastest way to merge two images : server

Question

I am making e-commerce site where images of product are actually created by merging two or more .png images, and creating a .jpg image from that is my main issue.

1. A product will have four images at different angles
2. I will have to create 4*2 = 8 images by all combinations of two images(if product is created by merging two product)

Problem is that if new product is merge of three then total 4*3=12

Generating these images fast and displaying them as soon as page loads will definitely take time

I want to know what should I use for that:

1. PHP
2. Node.js
3. Python
4. Or something else

or another fastest way of doing so what should i use please guide (i am using php for e-commerce platform)

Below is sample example: 1: Table X with Chair Y with 4 different angle

(transparent png + transparent png) = Combined image (in jpg)

X Horizontal view + Y Horizontal view = Combined image (in jpg)
X Top view + Y Top view = Combined image (in jpg)
X 45 deg view + Y 45 deg view = Combined image (in jpg)
X 90 deg view + Y 90 deg view = Combined image (in jpg)

Size of each will be 800px * 800px and about 300-400kb

Answer 1

There are many aspects to this question and I will not pretend to cover them all. Some of the variables are:

1. The type of disk on which you store your images - mechanical disk, RAID, SSD, RAMdisk

2. The format in which you store your images - PNG, JPEG, or ImageMagick MPC for example

3. What library/software you use - GD, ImageMagick or other

4. Whether you use a multi-core/multi-threaded/distributed approach

5. How you actually implement your processing

I did some experimenting and created 1,000 images, each 512x512 pixels. I created these on a RAID, on a SSD and on a RAM disk. I created them as both PNG format and ImageMagick MPC (Magic Pixel Cache) format. Then I read them in pairwise for compositing, ie image0 with image999, then image1 and image998, image2 with image997 ...

The code is like this:

#!/bin/bash
rm *.png *.mpc *.cache
for extension in png mpc; do
   echo Testing $extension
   # Create 1,000 input files
   for i in {0..999}; do convert -size 512x512 xc: +noise random $i.$extension ;done

   # Read the files in pairwise for processing, 0 with 999, 1 with 998, 2 with 997
   time for i in {0..999}; do j=$((999-i)) ;convert $i.$extension $j.$extension null:;done 

   rm *.png *.mpc *.cache
done

Here are the results for the 1,000 composites

RAID disk, PNG format: 43 seconds
RAID disk, MPC format: 6.9 seconds

SSD disk, PNG format: 33 seconds
SSD disk, MPC format: 6.1 seconds

RAM disk, PNG format: 30 seconds
RAM disk, MPC format: 6.0 seconds

I deduce there is a significant benefit to storing the images in MPC format when using ImageMagick. I also note that the RAM disk times are not much better than SSD times, so a significant amount of the processing time is probably creating the 1,000 processes to do the compositing....

... which brings me to my next point, the number of processes you create. It will probably be beneficial if you can do all the processing in a single process, so rather than do 12 processes this:

composite view1 with background1
composite view1 with background2
composite view2 with background1
composite view2 with background2
composite view3 with background1
composite view3 with background2
composite view4 with background1
composite view4 with background2
...

you should try and do this

load view1..4 background1..2, composite v1 b1 +write, composite v1 b2 + write, composite v1 b1  +write

which is easily done in ImageMagick

convert view{1..4} background{1..2} \( -clone 0,4 -composite +write v1b1.jpg \)
                                    \( -clone 0,5 -composite +write v1b2.jpg \)
                                    ...     

Note:

Some of this answer becomes irrelevant now you have updated your question, but as I spent the time writing it, I will leave it for reference.

Answer 2

You can do this with PHP's GD library like this:

<?php
$image1=imagecreatefrompng('image1.png');
$image2=imagecreatefrompng('image2.png');
$w=imagesx($image1);
$h=imagesy($image1);
imagecopy($image1,$image2,0,0,0,0,$w,$h);
imagejpeg($image1,'out.jpg');
?>

Or, if you want the images on a white background, you might prefer this:

#!/usr/local/bin/php -f
<?php

// Read in both images
$image1=imagecreatefrompng('image1.png');
$image2=imagecreatefrompng('image2.png');

// Get their dimensions
$w=imagesx($image1);
$h=imagesy($image1);

// Now create a blank canvas on which to overlay the images
$bg=imagecreatetruecolor($w,$h);

// Fill the background with white
$bgcolor=imagecolorallocate($bg,255,255,255);
imagefilledrectangle($bg,0,0,$w,$h,$bgcolor);

// Now copy the two images over the background
imagecopy($bg,$image1,0,0,0,0,$w,$h);
imagecopy($bg,$image2,0,0,0,0,$w,$h);
imagejpeg($bg,'out.jpg');
?>

Or you can use ImageMagick within PHP, like this:

<?php
   $img1=new Imagick("image1.png");
   $img2=new Imagick("image2.png");
   $img1->compositeImage($img2,imagick::COMPOSITE_ATOP,0,0);
   $img1->writeImage('out.jpg'); 
?>

The GD version is significantly faster on my iMac, it can do 1000 iterations in 18 seconds, whereas the ImageMagick version needs 36 seconds for the same number of images.