Crop & Resize with JavaScript, PHP, and ImageMagick

Update: A new version of this example and demonstration has been released. Version 1.1 includes a GD version of the script as well as a number of functional improvements worth checking out.

Update: There has been significant discussion in the comments regarding a GD version of this script. I have re-released v1.0 of this example as a GD version as well as an ImageMagick version. You can find both downloads below The download has been removed in preparation of version 1.1 due for release on December 17, 2007. They behave function exactly the same as one another. Thanks for all the contributions (Stefan Leever and others) and requests!

Image management is often a big part of a comprehensive CMS, and in my personal experience, has been one of the more difficult areas to make really easy for people to use. Those that are technically inclined are often able to successfully format an image to their liking if given proper instruction. On the other hand there are many who find image editing to be difficult, intimidating, and/or confusing.

View JavaScript Crop & Resize Demo

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

In an effort to better the situation, I put together a demo which gives the end user the ability to upload, crop, and resize their image from within their Web browser. The intention, on my end, would be to use it for server-side image pre-processing before the image is used by a client in their CMS for their website.

What powers JavaScript cropping & resizing

This demo wouldn’t be possible without a number of scripts that can not go without mention. First and foremost, the entire client side process is based on the Prototype JavaScript Library. Prototype has just been updated to version 1.5.0 and it acts as the foundation for both the crop and resize stages of the demo.

Another essential piece of this demo is script.aculo.us, a collection of effects addons for Prototype. It provides some really excellent UI tools to work with as well as various animation effects. Both the crop and resize stages use script.aculo.us features.

JavaScript Image Cropper UI by Dave Spurr

In my opinion, the most comprehensive aspect of this JavaScript image crop and resize demo is the cropping stage. The JavaScript Image Cropper UI by Dave Spurr is a script that deserves the spotlight in the demo. It was written using both Prototype and script.aculo.us and it is the one piece that really brings the demo together.

Dave’s JavaScript Image Cropper UI has many more capabilities than the basic version included in the demo. If you check out his documentation he includes cropper user interfaces that can inherit various options such as retaining an aspect ratio, min/max width/height, and also display a crop preview if desired. The JavaScript Image Cropper UI by Dave Spurr is a feat in and of itself and should be given proper recognition.

Server requirements

The provided demo was written for a Linux based Web server running PHP and having ImageMagick installed. It should run on a Windows based server with minimal adjustments, such as including the path to your ImageMagick install for each command.

ImageMagick is a powerful command line image editor which performs all of the actual image transformations server-side. Installation is usually quite easy after following directions written for your Web server configuration.

Installation notes

After you’ve downloaded the demo, extract the files to a common directory and upload that folder to your server. After uploading, the directory will need to be given write permissions. Failing to do so will destroy the functionality of the demo as uploads won’t be saved and there would be no way to create the adjusted images.

Download ImageMagick Crop & Resize (.zip)

The demos and downloads have been removed temporarily due to a security issue. Replacements will be linked as soon as possible. Thank you for your patience. Please discontinue use as soon as possible until a revision has been posted.

Closing thoughts about cropping and resizing with JavaScript

This demo was put together in an effort to make very basic image editing easier for less technically inclined users. The main intention is to provide it as a component to include in a variety of applications including custom content management systems or Web applications.

I hope the demo proves to be useful, but I absolutely welcome any comments and criticisms readers may have. Please take a minute to post your thoughts below so that the demo can be in constant revision to ensure it’s effectiveness.