Yahoo Answers is shutting down on May 4th, 2021 (Eastern Time) and beginning April 20th, 2021 (Eastern Time) the Yahoo Answers website will be in read-only mode. There will be no changes to other Yahoo properties or services, or your Yahoo account. You can find more information about the Yahoo Answers shutdown and how to download your data on this help page.

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 :)

Update:

I'd also be happy with a jQuery solution, JavaScript or jQuery please.

2 Answers

Relevance
  • 1 decade ago
    Favorite 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

  • ?
    Lv 4
    5 years ago

    undesirable theory. showing a photograph at a length different than the dimensions that's motives pixellation, at terrific. it is plenty greater functional to maintain a replica interior the dimensions you go with and reveal it as that's.

Still have questions? Get your answers by asking now.