Ever want to allow your web development clients to crop their own images as they upload them through your powerful CMS? If so, you've found a solution! No more explaining to them how to use an image manipulation program just to crop photos from their digital camera before they post them on their website! This Javascript code gives you a cross-browser, cross-platform simple way of defining a crop selection on an uploaded image.
The code included in this source download contains the JavaScript, CSS and PHP files used to create ths demo. The PHP functions for this task are nearly identical to my Image Watermarking functions, except instead of using imagecopyresampled, you'd use imagecopy (and adjust a few function call parameters).
First, upload a JPEG or PNG image file from your hard drive that you want to crop. This image will be used in the demonstration for defining the image crop selection area with the Javascript code.
Note that if you upload an image that is wider than this display area (between menus, borders, etc.) then the crop selection may not appear in the correct position on the image. I have not ben able to find a way to detect position changes due to floated elements like the column to the right.',
As I use this script more and more, I may find bugs or decide to implement something in a different way. When such is the case, I will add a note to this page about the differences since last version (don't expect a detailed changelog though).
5/11/2005: Bugs dealing with multiple absolute-positioned elements containing the image have been fixed. New feature added you no longer have to define the crop area from top-left to bottom-right; you can define your bounding points in any order. Additional bugs dealing with the absolute-positioned exist when selection is not made from top-left to bottom-right. Those will be fixed in a future release.
3/8/2005: Big changes here. Positioning of the selection area and calculation of the clicks in relation to the image is now calculated differently. It seems to be fairly accurate now, even when you have to scroll to make a click! In the process, the javascript function names were changed as well as the resulting url query string. The PHP function arguements were also changed to match with the new query string.
All code and scripts available for download on http://koivi.com are written by Justin Koivisto, ZCE and fall under the GNU Lesser General Public License (LGPL) Version 2.1 (unless noted otherwise). The full license agreement can be found within the LICENSE file within each distribution package.
© 2004 - Justin Koivisto, ZCE
Valid XHTML 1.0
