Composite based on location click

[x0ner]

I was wondering if ImageMagick would somehow be able to show me a picture, have me click the image where I want my other image to appear over it and then make it into a composite. Doing my quick reading I can see that ImageMagick can easily do a composite image, but what would be the best way to have it so that my second image were placed where I needed it?

Example - I want to put a hat on some uploaded picture. Each picture could have the persons head be in a different position, so the user would click where they would want the hat. This location information would be passed to ImageMagick and then the hat would be added in the right area.

Any ideas?

[snibgo]

ImageMagick is a command-line system, with no GUI. If you get the coordinates from a GUI, you could then use ImageMagick, eg:

convert person.png hat.png -geometry +20+50 -composite output.png

[Bonzo]

You can do it with php; if you look at my example here: http://www.rubblewebs.co.uk/imagemagick/trials/imap.php - something wrong with the css for this page !
When you click on a colour the position of the click is carried over in the address bar - its a long time since I did this and I can not remember 100% how it works !

[x0ner]

I know IM is CLI based. It is getting the coordinate data from the browser into a form that IM can process.

You can do it with php; if you look at my example here: http://www.rubblewebs.co.uk/imagemagick/trials/imap.php - something wrong with the css for this page !
When you click on a colour the position of the click is carried over in the address bar - its a long time since I did this and I can not remember 100% how it works !

I tried that example and I am curious to know how you render the color block images? I can see that you are passing 2 values based on the click that correspond with the color. Thanks for the example!

[fmw42]

IM on unix in the display mode has the ability to show you coordinates, but you cannot record them as far as I know. Type

display -help

after displaying an image, (on my Mac), if press and hold the option key and drag the cursor over the image, it display a magnified view and the cursor location and color values.


You can also use http://bigwww.epfl.ch/thevenaz/pointpicker/ to pick points and have them go into a file. Then you can read the file in, extract the coordinate and feed that to IM in a script to do the composite.


You may also be able to do that at http://www.imagemagick.org/MagickStudio ... Studio.cgi in an interactive fashion. I have not checked about composite, but it is likely there.

[x0ner]

IM on unix in the display mode has the ability to show you coordinates, but you cannot record them as far as I know. Type

display -help

after displaying an image, (on my Mac), if press and hold the option key and drag the cursor over the image, it display a magnified view and the cursor location and color values.


You can also use http://bigwww.epfl.ch/thevenaz/pointpicker/ to pick points and have them go into a file. Then you can read the file in, extract the coordinate and feed that to IM in a script to do the composite.


You may also be able to do that at http://www.imagemagick.org/MagickStudio ... Studio.cgi in an interactive fashion. I have not checked about composite, but it is likely there.

Thanks for pointing out the interactive thing. I guess I should mention that I want this all done within the browser and not on a client machine. I need to Google around to see if there is a JS lib to handle points being picked or just do some math to identify the image and figure out where the user clicked.

There is also the possibility of dragging the image of the hat on to the user picture. I could easily do this, but how would you save the drug image onto the original uploaded photo?

[x0ner]

I am thinking I can use JS to drag the hat on to the user. The uploaded image will be in a DIV and my hat image can be tracked based on its location relative to the div. So if the hat is 50% by 25% into the div then I may be able to have that correspond to how IM may process it. I could pass the location values to the IM processing and do a composite based on that.

[Bonzo]

I think it is quite a good example even if I say so myself and I use a simliar method for my gallery main page: http://www.rubble.info/gallery.php

There is a link to download the code on the page above the colour chart.

[x0ner]

I see how you are doing it with image maps. I suppose another method I could do is have the user highlight the placement of the hate and then use that as an image map to them add my picture to.

[Bonzo]

On my gallery page I am doing it slightly differently but can not rember for the life of me how it works !

I think it must be something to do with:

Code: Select all

$gallery_index = "gallery/background.jpg";

echo "<center>\n<form>
<input type=\"image\" src=\"$gallery_index\" name=\"map\" title=\"Select an image to go to the gallery\" >
</form>\n</center>";

And the position is passed in the URL in this format:

Code: Select all

http://www.rubble.info/gallery.php?map.x=256&map.y=89

I tell you when you get old the memory goes !