Cropping Workflow

Jcrop creates an interface to crop an image. However, actually creating a new, cropped image file is obviously beyond the scope of a client-side plugin. It may also be the most challenging part of implementing such a process in your web application (now that you've found Jcrop).

This article attempts to outline a general implementation theory. Some PHP example code is included, but the techniques discussed can be applied to any web development project or environment.

Overview

A typical workflow for cropping functionality in a web application looks like this:

  • Select what should be cropped
  • Display cropping interface
  • Capture selected coordinates
  • Transmit selection values to server for additional processing

Select what should be cropped

First, an element (usually an image) is selected by your user or application.

  • User uploads an image file (typical form workflow)
  • User selects a pre-existing image (e.g. from a gallery of images)
  • User drags and drops an image onto a page or element (HTML5)
  • User pastes an image from the clipboard (HTML5)
  • An arbitrary block element (e.g. client-side canvas)

Your application must prepare the image or block element to be cropped.

Display cropping interface

Once your application has the image to be cropped, it must be inserted into the document.

  • Included as typical <img> tag, in HTML generated on your server
  • An <img> tag generated dynamically and inserted using Javascript
  • It may also be a canvas or other block element

The image or block element must be in the DOM.

Capture coordinates

When are the coordinates going to be read or submitted?

  • Continuously updated (event listeners update form or application state)
  • Upon another event, such as a form submission (API or event listeners)
  • Arbitrarily on-demand by your application (read current state from API)

Your application must obtain or handle crop state/changes as needed.

Submit to server

In most workflows, the server performs the actual cropping or storage.

  • Transmit crop coordinates using submitted hidden form inputs
  • Transmit crop coordinates via "AJAX" GET/POST
  • Transmit encoded image data from a <canvas> (HTML5)

Your application must know when and how to transmit the crop coordinate data.

Storage and retrieval

An over-arching concern when working with uploaded images is how the images are processed and stored.

  • Are uploaded files stored permanently, or temporarily?
  • Or are they stored at all? (e.g. client-side workflow)
  • Where are they stored? On a local disk, or in the cloud?

Once a storage strategy is developed, your application will need to process the actual image crop operation, and store the resultant file.

These are all issues you must resolve in your own application, there is no single answer that will address every use case.

Example Code

Simple cropping code for PHP (requires the gd extension)

<?php

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

?>

Here we've loaded the source image, and created a true color working space to copy the cropped image into. The imagecopyresampled() function does most of the work (this is where we plug in the values from Jcrop).

To write the file instead of display it, change the last two lines like this:

// Comment out the header() call
// header('Content-type: image/jpeg');

imagejpeg($dst_r, $output_filename, $jpeg_quality);

An example of this technique is included in the download archive.
See Also: Image Processing in PHP (using gd)

Discussion

Obviously this script has some limitations. First of all, it only works with jpeg images, while the gd library functions support many common file formats. For now, improvements are left as an exercise to the reader. However, if you're still following along, congratulations! You're well on your way to implementing image cropping into your web application.