ImageMagick, insert an image at a specific position / size into a larger image?

Question

I'm firstly drawing a wide transparent image with columns, which works fine.

convert -size 5568x1920 xc:none iphone6plus.png
convert iphone6plus.png -strokewidth 0 -fill lightgray -draw "rectangle 1080,0 1121,1920 " iphone6plus.png
convert iphone6plus.png -strokewidth 0 -fill lightgray -draw "rectangle 2202,0 2243,1920 " iphone6plus.png
convert iphone6plus.png -strokewidth 0 -fill lightgray -draw "rectangle 3324,0 3365,1920 " iphone6plus.png
convert iphone6plus.png -strokewidth 0 -fill lightgray -draw "rectangle 4446,0 4487,1920 " iphone6plus.png

Then I'm rotating another image, again works fine.

convert /en-US/iPhone6Plus-main_start_multi_child.png \
-rotate -2 \
iphone6plus-new.png

However, I'm trying to insert the second (rotated image) into the first image at a specific position / size. I'm having problems, I've tried several things, the closest I've got seems to overwrite the source image.

convert iphone6plus.png \
 -geometry 40x40+5+10  \
 -composite \
iphone6plus-new.png

What should I be using?

Also how should I improve the speed of this operation.

EDIT: Issue shown below...

convert -size 5568x1920 xc:none -strokewidth 0 -fill lightgray \
   -draw "rectangle 1080,0 1121,1920 "  \
   -draw "rectangle 2202,0 2243,1920 "  \
   -draw "rectangle 3324,0 3365,1920 "  \
   -draw "rectangle 4446,0 4487,1920 "  \
   \( iPhone6Plus-main_start_multi_child.png -background transparent -rotate -2 -gravity center -resize 1473x755 \)  \
   -geometry -190-50 \
   \( iPhone6Plus-test_multi_child.png -background transparent -gravity center -resize 1473x755 \)  \
   -geometry +2000-50 \
   -composite iphone6plus-new.png

convert -size 5568x1920 xc:none -strokewidth 0 -fill lightgray \
   -draw "rectangle 1080,0 1121,1920 "  \
   -draw "rectangle 2202,0 2243,1920 "  \
   -draw "rectangle 3324,0 3365,1920 "  \
   -draw "rectangle 4446,0 4487,1920 "  \
   \( iPhone6Plus-test_multi_child.png -background transparent -gravity center -resize 1473x755 \)  \
   -geometry +2000-50 \
   -composite iphone6plus-new.png

Mark Setchell · Accepted Answer · 2017-05-22T09:20:17.910

Firstly, settings such as strokewidth and fill persist until changed, so don't keep repeating them.

Secondly, just create your background once and keep adding to it rather than saving and closing and then re-opening on the next line.

convert -size 5568x1920 xc:none -strokewidth 0 -fill lightgray \
   -draw "rectangle 1080,0 1121,1920 "  \
   -draw "rectangle 2202,0 2243,1920 "  \
   -draw "rectangle 3324,0 3365,1920 "  \
   -draw "rectangle 4446,0 4487,1920 "    basic.png

Now, load in your new image that needs rotating and apply rotation to it inside parentheses so that the rest is not affected, then composite that onto the background:

convert -size 5568x1920 xc:none -strokewidth 0 -fill lightgray \
   -draw "rectangle 1080,0 1121,1920 "  \
   -draw "rectangle 2202,0 2243,1920 "  \
   -draw "rectangle 3324,0 3365,1920 "  \
   -draw "rectangle 4446,0 4487,1920 "  \
   \( SomeOtherImage.png -rotate -2 -resize AxB \)  \
   -geometry +X+Y -composite result.png

You may need +repage after the -resize AxB.

Updated Answer

Does this get closer to what you need maybe?

#!/bin/bash
convert -size 5568x1920 xc:none -strokewidth 0 -fill lightgray -background transparent -gravity center \
   -draw "rectangle 1080,0 1121,1920"  \
   -draw "rectangle 2202,0 2243,1920"  \
   -draw "rectangle 3324,0 3365,1920"  \
   -draw "rectangle 4446,0 4487,1920"  \
   \( xc:blue[1024x768] -rotate -2 -resize 1473x755 \) -geometry -190-50 -composite \
   \( xc:red[1024x768] -resize 1473x755 \)  -geometry +2000-50 -composite result.png

When you rotate an image, its size and bounding box change. When you try to composite it over your background image, it is compositing the upper left corner of the bounding box relative to the upper left corner of the background image. The best way to avoid such issues, is to use -gravity center and -geometry +X+Y with X and Y values relative to the center of the background image. That way, the composite will position the center the overlay image at the desired offset point from the center of the background image. So add -gravity center to Marks command and the appropriate center rel. X and Y. — fmw42, May 21 '17 at 23:04
@fmw42 thanks, however that doesn't quite fix my second image problem. If I comment out the first rotated image as show in Marks answer, the second image appears in the position of the first. I've added an edit about in my question. — Jules, May 22 '17 at 08:08
Can you explain a bit more clearly what the problem is please - I am not quite understanding it at the moment. All I can see is two new pieces of code and two new images but I don't know which is wrong or right and how it is supposed to look.... — Mark Setchell, May 22 '17 at 09:13
That sorted it :) Makes sense adding composite, with it being black. Cheers. — Jules, May 22 '17 at 13:11

ImageMagick, insert an image at a specific position / size into a larger image?

1 Answers1