Archive for October, 2008

JQuery-UI Photo Cropping Tool

This was a cool little application I devised after one of my clients explained that he wanted the ability to have users upload a photo and have it automatically fit into a particular size.

Now, my first reaction could have been to simply use ImageMagick or the GD Library to simply create a thumbnail, but I’ve done that in the past and seen it stretch images in unexpected ways. He knew exactly the size he’d want his images resized to, and I didn’t want to force the users to submit pictures with a particular aspect ratio.

So, the solution I came up with, and am still pretty proud of, is a photo-cropper and resizer in one. It lets the user upload a photo, and then zoom in to a particular portion, crop it, and use it as their submission to the website. It uses javascript (jQuery flavor) to mimic the effect of selecting the target area, and then PHP on the backend does the actual resizing.

Try it out below. Your actual-size final result will appear beneath the button here on the screen. Due to limitations imposed by my server host however, large photos may not work. It wasn’t an issue for my client, since he has the luxury of a dedicated machine.


Download the source
(222 KB compressed with related graphics and script libraries)

October 21 2008 | Schmategories | No Comments »