Selecting parts of an image / intelligent thumbnailing

[Kinslayer]

I want to allow users to upload a picture for their profile, but make sure that the generated thumbnail is only of that user's face, rather than the whole image.

I'm hoping someone knows of something like this that already exists, or, if I could get some ideas and a pointer at some functions so I can do it myself [I have no previous JS experience but can usually pick up languages pretty quickly].

The two ways I foresee of doing this are:

A) The user can drag a box/border of any size around his/her face, and then both (x,y) co-ordinates are sent as form values.

B) A presized box of set proportions which can be made bigger or smaller while maintaining the aspect ratio (preferable). Here I'd need the magnification or size of the box and just one (x,y) co-ordinate being center or upper left, etc.

Obviously the actual resizing and thumbnailing will be done on the server side with PHP (which I can do really easily assuming I get the above data as lets say hidden elements of a form)

This could be really cool :)

- Gadi

[ez4ne12c]

I would do it this way
track the cursor position..easy
onclick events to store any user points .. easy

if you want any outline box that might be messy but could be done using innerHTML and CSS

Once you have the data you will need to use a server side language like perl to call a batch style image manipulation tool

ImageMajick or netpbm tools (netpbm tools you need would be pnmcut and pnm2gif) because although you will display a gif and return a small gif to the user you may need to use a pnm version of the image to use some of these tools..

I have done similar things to what you suggest but not exactly the same in the same program

You project is doable but you might struggle with js unless you can write tools that are available server side

btw you could use php instead of perl

hope this doesnt discourage you it sounds like a fun project to get working..

ez:)

[joh6nn]

this would actually (theoretically, anyway) be pretty easy. however, it occurs to me that in order for the javascript/php editing to occur, the image has to be already uploaded, in which case, it would be better to edit the pictures offline, instead. don't know if that's a route you might want to consider that.

[GoHF]

Boys boys, the guy didnt say anything about not uploading the image. He wants the image uploaded, and then he wants the information about the selection of the picture that he will thumbnail.

Although I would be most pleased with writing 500 lines of code (ok ok, its a little too much :) for this, most of the work can be done in Dreamweaver. Both approaches you sugested are possible. The first is the most complex but the most easily configurable by the user (resizing the selection), the second is the easiest to code but may become akward to the user (fixed sized selection, bad for very small or very "zoomed in" big images).
It's all about using a bordered div (red or green 4px borders) bound to the image (means you can't drag it out of the image). The user places (and resizes) it over the desired part of the image then clicks submit, you catch the event, cancel the submit, save X, Y, Width and Height of the selection on some <input type=hidden> fields and finally submit the form.

Then you can use those values on your imagecopyresampled() ;).
Good luck (I'll give this a try in the next hours but no promisses).

[GoHF]

Second option implemented for IE only (yes, this is very important). It was tested during conception on IE6, but I guess most events and functions work on IE5 (I don't know, but I doubt IE4 had the onPropertyChange event):

http://mega.ist.utl.pt/~pfbe/bin/image_selection.htm

Way to use:
1- Select the image from your hard-drive
2- When the image loads you will be able to edit the selection (red square on the left top side of the image). Move the selection around. Change it's size (width and height are the only you can change right now, cause I'm sleepy as hell). You'll quickly understand all the restrictions I've put into moving the selection around and resizing it (try resizing it so it goes outside the image).
Well, the fields are always updated with the place and size of the selection, so when you press "Upload", your server script will receive the updated selection information.

If you are interested in this I can trim it all pretty for you, with easy to configure colors and variables, fixed aspect-ratio and comments, although I can't promise to make it "all browser compatible"... maibe after some sleep :).

Ah, a word of warning, if the server is down, just try later. It's my university's server and its oftenly "offline" :) 8 processors, 4gigs of ram and a oc-3... but they just can't leave the machine alone. Nasty sysadmins.

[joh6nn]

my point, GoHF, was that if you have to upload the image before you can edit it, then it makes much more sense to edit the image first; the cropped image would be smaller, and upload faster.

[GoHF]

Ok ok, sorry for the somewhat rash reply I gave previously =). Still, I think his point is that the user might want to generate a partial thumbnail that will later be used as a link to the full image, thus his need to have both the original image and the thumbnail info.

Sorry again, no bad feelings towards anyone =).

[ez4ne12c]

You have specified the way to select the image:thumbsup:
what about cutting the image:confused:
you still more or less need to use perl or php or the like ..and an image tool like netpbm:cool: or ImageMajick:cool:.. this would be really tough to do in js.. (you could maybe fake it with CSS using visibility and positioning but i dont think that is a robust solution:(

go server side for this type of thing;)
ez

[joh6nn]

Originally posted by Kinslayer
Obviously the actual resizing and thumbnailing will be done on the server side with PHP (which I can do really easily assuming I get the above data as lets say hidden elements of a form)

[ez4ne12c]

As a matter of intrest how would you do it in php.. do you need image tools or are these built in?
(i use perl.. just had very quick look at php..)
ez

[GoHF]

They are built in. There is a Graphics library that has image manipulation functions, so it's fairly easy to manipulate the most common image formats (bmp, png, jpg and gif).

In this case, if he has the rectangle of the image he wants to use as thumbnail, he can ask PHP to cut that rectangle, resize it to a standard thumbnail size he may want for his whole site, and then print it either to a thumbnail file or directly to the browser. So, no real need to have the client manually edit the image and upload both the original and his hand made thumbnail. :)

----------

I've edited a couple of things on the page I linked on a previous reply. Now it detects when an image has been successfully selected (you never know when the user decides to select a text file) and only allows selection of the area to thumbnail in that case.
There was also a resize glitch. If you resized the window, the selection would get out of place. That's also fixed. Still only works IE 5+ (which is... 70% of browsers used?).
Tomorrow I'll try to implement resizing the layer directly with the mouse.

[Kinslayer]

Hey GoHF,

Thanks alot for the original script... would never have been able to come up with that myself but am slowly learning the ropes of JavaScript.

I'm going to have to look at your additions and try integrate them what I've done with your work so far... if you're really into this let me know and we can try a more collaborate effort or i will just let u do all the work :>

What I've done so far is add a relatively simplistic aspect ratio resizing thing, and start some work at browser campatibility (i proof read my site in mozilla).

It's still a real mess at the moment, and I think I broke the form update. I'm still working on it but wanted to upload what I've done so far because I'm not on the 'net that often (3rd world internet and all).

Anyways thanks alot for all the help, and your time. Thanks to everyone else as well, I think most other issues in the thread have already been commented on.

http://www.habo.org.za/image_selection.php

Gadi

[Kinslayer]

status check:

* mostly working in IE and Netscape, with some neatening up on the code
* IE wont recognise mouse movements unless there is a background (odd!) so you need to hold the mouse on the border
* Netscape doesnt have an opacity filter, most unfortunate. so for the momment the 'viewfinder' is transport.
if i didnt explain it before to resize the box you need to drag the blue box in the bottom right hand corner.
* Netscape can't (or I dont know how) display a local image, so for the moment it loads a pic of a friend of mine.

[URL in previous post]

Gadi

09/02/03: works in IE/Netscape, with opacity (using an alpha PNG in netscape) and proper dragging.

coordinates in netscape are a bit off.