How to resize image javascript?

Is there JavaScript code to select a portion of an image for a thumbnail?

• I'm working on a website for a photographer and have created a php upload form which processes the images using Imagick, resizing the image and saving it to the gallery, while adding the image name (generated using md5) to a MySQL database. When the image has been uploaded the photographer can then set an image title, description and specific gallery for it to go into. I want the photographer to be able to select a square section of the image (preferably resizeable) on this page and click a *Create Thumbnail* button and it process the image in Imagick, cropping to the selected proportions. Would it be possible to use JavaScript to get the start and end coordinates for the thumbnail and send it to the php code on the form submit for processing? How would I do this? Any tutorials are preferred but if you have the code handy it wouldn't hurt :)

• Answer:

  Depending on your level of skills - yes you would be able to do this. You could try something along the lines of making the image a background image - having the click and drag events picked up, and getting javascript to change the background-position. Whilst changing the background position, you could also log the x and y co-ords in a hidden field. Simply pick them up with PHP when you submit the form and there you go! That would be the easiest way to do it if you wanted to crop to a specific size (and crucially, not have to resize that cropped image) It sounds like you can use Imagick, so why not either use that or GD to create, say 9 potential thumbnails (top left, top middle, top right etc.) and allow the user to click which one they'd prefer. It's not the perfect solution, but it sure is an easy one