Combine 2 images side by side into 1 with ImageMagick (PHP)

Question

I think this is an easy one.

I have 2 Pictures/JPGs and i want them to merge into one picture where the 2 are side by side.

So i have pic [A] and pic [B] and I want to get pic [AB] (side by side).

Both images have same width and height. In this case width=200px and height=300px. But the 2nd Image should appear on position 200,0 .. also when imagewidth is smaller than 200px (200px is maxwidth)

This is what I've tried (php):

exec($IMAGEMAGICK_PATH."composite picA.jpg -geometry +200+0 picB.jpg picAB.jpg");

I also tried the same with "-size 400x300" after "composite" but nothing happens. Problem is that the image picA.jpg is moved 200px and merged into picB.jpg, but the width of picAB.jpg is the same as picB.jpg is.

I'm also not sure if "-geometry" is the correct command.

related: https://stackoverflow.com/questions/20737061/merge-images-side-by-sidehorizontally | https://superuser.com/questions/290656/combine-multiple-images-using-imagemagick — Ciro Santilli OurBigBook.com, Aug 04 '17 at 07:41

Kurt Pfeifle · Answer 1 · 2012-08-22T15:29:30.250

14

No need to use -geometry if both files are the same size. Try

exec($IMAGEMAGICK_PATH."convert picA.jpg picB.jpg +append picAB.jpg");

Use -append if you want to merge pictures in a column.

Add -background none or -background black or -background white or whatever, if your pictures are not the same size. In this case you may also want to add -gravity center or -gravity south or some such to control how exactly the two images merge. The -gravity needs to appear before the +-append on the commandline then:

exec($IMAGEMAGICK_PATH."convert big.jpg small.jpg -gravity east -append 2x.jpg");

edited Aug 22 '12 at 15:29

answered Aug 22 '12 at 15:23

Kurt Pfeifle

86,724
23
248
345

hey thanks. that's it. but what i forgot: if my pictures are smaller than 200px i want the picB.jpg to appear after 200px from 0,0 .. so that there is a whitespace between the two merged pix. Can I do this with geometry? – John Doe Smith Aug 22 '12 at 15:31
@JohnDoeSmith: what background color do you want for the 'gap'? – Kurt Pfeifle Aug 22 '12 at 15:58

Kurt Pfeifle · Accepted Answer · 2015-02-24T12:54:18.733

Here is a commandline to do the image appending due to the extended requirements, where the right picture should be offset by 200 pixels from the left edge, regardless of the (smaller) width of the left image:

 convert                          \
   -background '#FFF9E3'          \
    xc:none -resize 200x1\!       \
    right+narrow.png -append      \
    left+wider.png                \
   -gravity south                 \
   +append                        \
   -crop '400x +0+1'              \
   +repage                        \
    result.png

The part xc:none -resize 200x1\! creates a 1 pixel high, 200 pixels long line and vertically appends the smaller (right) image to it.

To this intermediate result the horizontally appending of the wider (left) image happens. We would now have a 401x100 picture with a maybe ugly line of transparent pixels on top.

That's why we shave off this top pixel line with the -crop function.

You should be able to translate that into PHP yourself... :-)

score 3 · Answer 3 · answered Aug 22 '12 at 17:29

Maybe you'll find the montage method easier to understand (this is probably what you had in mind when you tried it with composite -- but that one is for overlapping images, not for side-by-side montage...)

montage                 \
  -background '#FFF9E3' \
  -geometry 200\!x\>    \
  -gravity west         \
   right+narrow.jpg     \
   left+wider.jpg       \
   result.jpg

score 3 · Answer 4 · answered Jul 10 '13 at 17:41

Here the PHP Code I use at Kinoulink (a french start-up) :

$im1 = new \Imagick($media1);
$im2 = new \Imagick($media2);
$imTotal = new \Imagick();

$im1->cropthumbnailimage(62, 128);
$im2->cropthumbnailimage(62, 128);

$imTotal->newimage(128, 128, '#ffffffff');

$imTotal->compositeimage($im1, \Imagick::COMPOSITE_DEFAULT, 0, 0);
$imTotal->compositeimage($im2, \Imagick::COMPOSITE_DEFAULT, 66, 0);

$imTotal->writeimage($albumCoverFilePath);

Combine 2 images side by side into 1 with ImageMagick (PHP)

4 Answers4

Linked