[thelist] DHTML/Javascript thumbnail crop creator

[Andy Warwick]

Hi

Not even sure what to call the code I'm looking for, but 
"DHTML/Javascript thumbnail crop creator" kinda covers it.

I'm writing a CMS for a photographer who needs to upload his own 
pictures to his website.

I've got no problem with the backend (PHP) script to create the 
thumbnail, etc. but I'm having 'issues' with the UI in the actual 
upload pages.

Some of the pictures are quite 'busy', and by the time they get reduced 
to 100 pixels square (or less) you can't tell what they are. If I was 
creating thumbnails manually I'd crop the picture before shrinking it. 
E.g. If it was a head to waist shot of a person, I'd crop the picture 
to head and shoulders, then thumbnail that.

What I'm after--if such a thing is even possible-- is a 
Javascript/DHTML UI that creates a visual box over the uploaded image, 
which is under button (or even better, mouse) control, that will show 
how the image is cropped before it is thumb-nailed.

The user would upload the image, then be presented with a screen 
showing the image with a bright outline of a box superimposed over it. 
By putting in coordinates from one corner, and adjusting the 
width/height of the box, the user can indicate which area of the large 
picture he wants to use as the thumbnail.

It would be great if the box could be clicked and dragged with a mouse, 
like resizing a window, but I'm not sure that is even possible.

Make sense?

For those of you who've used Photoshop, I'm after a way to re-create 
the crop tool in a browser window.

If anyone can point me at some guidance for creating such a beast--or 
has some code like that they are willing to share--I would be very 
grateful.

TIA


-- 
Andy Warwick
Creed New Media Design
w: http://www.creed.co.uk