dhtml "selection tool"

[freebie]

Hi,
I'm working on creating a dhtml front end for an online image processor. I want my clients to be able to upload an image (i'm using PHP for this), and then be able to crop the image (the image will be displayed on the web page after uploaded) using a photoshop-like selection tool (created with dthml). The values generated from the tool will be sent back to the server to process the image using PHP and ImageMagick.
Does anyone have any hints about how to get started with the javascript part (only needs to work for IE). I'm not too familiar with drawing with dthml (are there any built in functions yet). I read somewhere that you have to use a separate layer for each pixel drawn (or something to that effect). Are there any good third party or free dthml api s for this?
I just need for the user to see the selection they have drawn out (and I will display the width and height of the selection so they will know where to stop). So I need to do things like onMouseDown="MouseDown=true;x_start= getX();y_start=getY();" onMouseMove="if(MouseDown==true){showRectangle();}" onMouseUp="MouseDown=false;"
// this is not meant to be real code, just an idea of what I'm trying to do, and then I'd create a showRectangle function using dhtml, such as lineTo type functions.

Thank you for any thoughts.

Jeff

[BestZest]

This is something I wrote for someone else, so I don't know if this is what you want but, there you go, give it a try:rolleyes:

Here's (http://www30.brinkster.com/bestzest/js/cropimage.html) the page.

BestZest

[freebie]

Yeah,
that's pretty awesome. it will definitely will help get me on the right track.
thank you.
Jeff

[darianw]

As a partial answer to your DHTML question, this is something along the lines of what I think might work...

Say your image is displayed on the browser (most likely in it's own div layer). An easy way to let your user know what they are cropping would be to draw a 'selection region' (i.e. another layer) on top of this image corresponding to their mouse down, mouse drag, and mouse up. Once the mouse is released you can then capture these coordinates and make your adjustments accordingly. IE has a neat feature in that your layer can have an alpha filter applied to it - which will make your selection region 'see through'.

Hope this helps :)
Darian.

[freebie]

definitely helps!
I was wondering if it allowed the alpha (like flash).
I will definitely include that part into it
ZestBest gave a pretty good example above.
So far, I've been working off of that.
Thanks to both of you for all of the help.

Jeff