using draw command and crop together

Questions and postings pertaining to the usage of ImageMagick regardless of the interface. This includes the command-line utilities, as well as the C and C++ APIs. Usage questions are like "How do I use ImageMagick to create drop shadows?".
Post Reply
kalimba
Posts: 4
Joined: 2011-12-17T12:55:10-07:00
Authentication code: 8675308

using draw command and crop together

Post by kalimba »

hi,
i want to use -draw and crop command width together. is it possible?

my working command line code example :
convert Hydrangeas.jpg \
( Koala.jpg -crop 300x300+0+0 -matte -virtual-pixel transparent +distort SRT "0,0 1 30" -geometry +0+15 ) -composite \
( Koala.jpg -crop 300x300+0+0 -matte -virtual-pixel transparent +distort SRT "0,0 1 30" -geometry +300+300 ) -composite \
outputimage.jpg


i want to do this.

convert Hydrangeas.jpg ( -draw " translate +300+300 rotate 30 "crop" image over 0,0 0,0 Koala.jpg" ) -composite \
( -draw " translate +300+300 rotate 30 "crop" image over 0,0 0,0 Koala.jpg" ) -composite \
outputimage.jpg \

i know draw command doesn't crop modifier,

when i try to do this:
convert Hydrangeas.jpg ( -draw "image over 0,0 0,0 Koala.jpg" -crop 300x300+0+0 ) outputimage.jpg crop main canvas, and this is a problem

when i try to this:
convert Hydrangeas.jpg ( -draw "image over 0,0 0,0 Koala.jpg" -crop 300x300+0+0 ) -composite outputimage.jpg i am geting an error

d:\imagick_test>convert Hydrangeas.jpg ( -draw "image over 0,0 0,0 Koala.jpg" -
crop 300x300+0+0 ) -composite outputimage.jpg
convert.exe: missing an image filename `outputimage.jpg' @ error/convert.c/Conve
rtImageCommand/3016.


i currently work a greeting card aplication similar to shutterfly.com.

example.
http://fottom.fatpixel.net/images/8.jpg


Thank you
best regards
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: using draw command and crop together

Post by fmw42 »

try without the parens and put single quotes arouond Koala.jpg

convert Hydrangeas.jpg -draw "image over 0,0 0,0 'Koala.jpg'" -crop 300x300+0+0 outputimage.jpg

see
http://www.imagemagick.org/Usage/layers/#draw
kalimba
Posts: 4
Joined: 2011-12-17T12:55:10-07:00
Authentication code: 8675308

Re: using draw command and crop together

Post by kalimba »

thank you for reply,

i've try it , but the command also croped canvas. i read many example at http://www.imagemagick.org/Usage/. there ise not an example about using draw and crop together width multi layer image.

i do another way , example:

convert Hydrangeas.jpg
(Koala.jpg[800X400] -geometry +10+10 -crop 600x400+100+0 -matte -virtual-pixel transparent +distort SRT "XX") -composite
(Koala2.jpg[800X400] -geometry +10+10 -crop 600x400+100+0 -matte -virtual-pixel transparent +distort SRT "XX") -composite
outputimage.jpg

but i have problems width transform center, i always want image transfom center at up-left corner. -draw command is very usefull. translate, rotate modifiers are in it. rotate center ise up left corner. then resize, operations , i can rotate the shape and move it where will be on canvas. -draw command is perfectly work rectangle shape, but i could't use with cropped image.

my images and simple batch file at http://fottom.fatpixel.net/test/imagick_test.rar (convert Hydrangeas.jpg -draw "image over 0,0 0,0 'Koala.jpg'" -crop 300x300+0+0 outputimage.jpg example)

thank you very much
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: using draw command and crop together

Post by fmw42 »

The result of this command

convert Hydrangeas.jpg -draw "image over 0,0 0,0 'Koala.jpg'" -crop 300x300+0+0 outputimage.jpg

will be exactly as you got. Both your images are larger than 300x300. So when you overlay the Koala in the upper left corner of the Hydrangeas, you only see the Koala within the top left 300x300 area.

Please explain further what you are trying to do.

Try

convert Hydrangeas.jpg -draw "image over 0,0 0,0 'Koala.jpg'" -crop 500x500+0+0 outputimage.jpg

This shows the most of the koala with some of the hydrangeas at the bottom.
User avatar
anthony
Posts: 8883
Joined: 2004-05-31T19:27:03-07:00
Authentication code: 8675308
Location: Brisbane, Australia

Re: using draw command and crop together

Post by anthony »

If you are only using the draw command for translation and rotation. Then you can do away with it.

-distort SRT can rotate around any point (center of pixel, or edge, or even a point beyond the edges of the image)
and even translate that image to a new position right down to a 'sub-pixel' (floating point) location!

The layering (virtual canvas) features will ensure the image location is preserved, appropriately so that when you layer the image on a background it will be positioned exactly as requested in the distort. You can however use the 'viewport' features
to crop the distorted image to a specific area, to speed up the process.

Mind you -flattening the image onto a background image will also crop that overlay image to that background. Other laying methods can expand the canvas to preserve more information.

Basically if you can exactly define what you are after then IM can do it, and we can help you work it out.
Anthony Thyssen -- Webmaster for ImageMagick Example Pages
https://imagemagick.org/Usage/
kalimba
Posts: 4
Joined: 2011-12-17T12:55:10-07:00
Authentication code: 8675308

Re: using draw command and crop together

Post by kalimba »

hi. thanks for reply.

i try to explain what i try to do at http://fottom.fatpixel.net/test/imagema ... estion.jpg image.

i stored information in template like this. This is easly convert to php object format (with json_decode).

Code: Select all

{
	"background": {
		"image":"13_background.png",
		"color":"rgb(255,255,255)"
	},
	"images":{
		"img1":{
			"w":21.3, //image width on canvas. the positions units are percentage
			"h":15.9,//image height on
			"l":39.5,//image left positon on canvas
			"t":17.3,//image top position on canvas
			"r":0//image rotate
		},
		"img2":{
			"w":19.3,
			"h":12.7,
			"l":30.5,
			"t":33.7,
			"r":0
		},
		"......",
		"text":{
			"text":"some text",
			"font":'arial',
			"pointsize":15
		}
	}
}
i want rotate images upper left corner because i dont' want to lose position information upper left corner to move orginal position.


my project test version at http://fottom.fatpixel.net/?page=template ,

an unrotating vesion at http://fottom.fatpixel.net/?page=testarea&code=8 .

imagemagick code (you can see command line codes at ajax post requests)

Code: Select all

"/usr/local/bin/convert"  /var/www/html/fottom/templates/cache/23_L_06_4523_scb_15_with-love_red_50.mpc   \
( /var/www/html/fottom/user_images/2011-11/112.jpg[222.9149115417x147]     -geometry +0+0 -crop 117.35240963855x147+52.781250951574+0 -matte -virtual-pixel transparent +distort SRT "0,259 1 0 100,100"  \) -composite         \
( /var/www/html/fottom/templates/8_foreground_mask.png[352.40963855422x500] -geometry +0+0  \) -composite    \( +clone -write  /var/www/html/fottom/templates/preview/23_L_06_4523_scb_15_with-love_red_50.jpg -quality 80 +delete \) /var/www/html/fottom/templates/cache/23_L_06_4523_scb_15_with-love_red_50.mpc
a rotated example at http://fottom.fatpixel.net/?page=testarea&code=16

Code: Select all

"/usr/local/bin/convert"  /var/www/html/fottom/templates/cache/23_L_06_4523_scb_15_with-love_red_50.mpc   \( /var/www/html/fottom/user_images/2011-11/112.jpg[391.96630160067x258.48]     -geometry +-15+55.286 -crop 380x258.48+5.983150800337+0 -matte -virtual-pixel transparent +distort SRT "0,259 1 -13 100,100"  \) -composite   \( /var/www/html/fottom/templates/16_foreground_mask.png[500x359] -geometry +0+0  \) -composite    \( +clone -write  /var/www/html/fottom/templates/preview/23_L_06_4523_scb_15_with-love_red_50.jpg -quality 80 +delete \) /var/www/html/fottom/templates/cache/23_L_06_4523_scb_15_with-love_red_50.mpc
please drag images to patern area on template.

Best regards
User avatar
anthony
Posts: 8883
Joined: 2004-05-31T19:27:03-07:00
Authentication code: 8675308
Location: Brisbane, Australia

Re: using draw command and crop together

Post by anthony »

Hmmm....
assuming you have something reading in the data. into variables...
I would do something like a looped image layering method such as..
http://www.imagemagick.org/Usage/layers/#layer_prog
But use Distort SRT to do the scale and rotation of each images
http://www.imagemagick.org/Usage/distorts/#srt

Using the 5 numbers in the input data you have given...
The distort command is (in floating point values)

Code: Select all

    convert "$background_image" \
         ( "img1" -alpha set -virtual_pixel transparent \
              +distort SRT  "0,0 %[fx:$w/w],%[fx:$h/h]  $r  $x,$y" ) \
          ....
          -background $color  -flatten   result.png

The %[fx:...] is a internal expresion that converts the given width/height into scaling ratios.

Each of the miff images (output by the above into a concatinated pipeline) are then merged using...

If you have a example code that reads in the image data, I can be more specific.  But the above distort will scale the images to the right size (even to a sub-pixel size)  rotate about the 0,0 handle (very edge corner) and move that
corner to the sub-pixel location given as a 'layer image'.  That is  Scale, then rotate, then translate, exactly as you specify in the data give, using floating point and sub-pixel positions! 

Note that positions are in image coordinates not pixel coordinates.
   http://www.imagemagick.org/Usage/distorts/#control_coordinates
that is $x,$y is relative to the image edge, not to a pixel.   0,0 is an edge,  0.5,0.5 is the center of the top-left pixel.
Anthony Thyssen -- Webmaster for ImageMagick Example Pages
https://imagemagick.org/Usage/
kalimba
Posts: 4
Joined: 2011-12-17T12:55:10-07:00
Authentication code: 8675308

Re: using draw command and crop together

Post by kalimba »

Thanks fmw42,anthony

i have solve my problem without using draw command. as far as i understand -draw features doesn't support crop process.
i used to know X,Y of distort are local values, but they are not. this is good for me.

distort has scale parameter in your example, but i should use crop. because:

1- reading a large background image file with "Read Resize" mode to generate a preview browser version. backgroundimage.ext[XXxXX]
2- reading a large user image with "Read Resize" mode. image.ext[XXxXX] and crop (not scale, because i will use a part of the resized image)
..
..
3- saving image

i read again about using virtual canvas , layering sections. my mistake was using +distort command. now i use -define and -distort, it works nicely.

my final code:

canvas_w = my canvas width preview or print size (on production)
canvas_h = my canvas height preview or print size (on production)
rotate_value = 15
offset_l = upper left corner distance of user image to the canvas left edge
offset_t = upper left corner distance of user image to the canvas top edge

i can get main values(*) from template code to calculate all rotate, crop, offset, w, h values using php.

(*) i can get these percentage values (without r) on photoshop (at percent unit!)
....,
"img1":{
"w":21.3,//width
"h":15.9,//height
"l":39.5,//left offset
"t":17.3,//top offset
"r":0//rotation
} ,...

image1 width = canvas_w * ( img1->w/100 )
image1 height = canvas_h * ( img1->h/100 )
image1 offset_l = canvas_w * ( img1->l/100 )
image1 offset_t = canvas_h * ( img1->t/100 )


at start i generate a cache file from template background

Code: Select all

conver bigbackgroundimage.ext[canvas_wXcanvas_h]  cacheimage.mpc
not exacly command, only for explain

Code: Select all

convert cacheimage.mpc
(
 image1.ext[xxXxx] 
-crop[xxXxx] 
-define distort:viewport=canvas_wXcanvas_h+0+0 
-matte -virtual-pixel transparent -distort SRT "0,0 1 rotate_value, offset_l,offset_t" 
-antialias
)  -composite 
(
 image2.ext[xxXxx] 
-crop[xxXxx] 
-define distort:viewport=canvas_wXcanvas_h+0+0 
-matte -virtual-pixel transparent -distort SRT "0,0 1 rotate_value, offset_l,offset_t" 
-antialias
)  -composite 

( +clone -write previewfile.jpg(for browser) -quality 80 +delete ) cacheimage.mpc (for next drag drop operation)
do you have any comment ?

it would be nice a crop function for -draw command to crop for shapes, images, text.

Thank you very much your idea, links and writings.
Best regards
Post Reply