[ajax-crop]



The jquery cropping tool is to use client-side features to make the 'actual cropping' easier. In this example, we will perform a server-side crop using an ajax call, APACHE and PHP with GD library.

Two options are specified when the plugin is initialized: the cropped image information is turned on in the "console" and the method to get the current information "onCropFinish" will be utilized.

Everytime the plugin finishes a crop-box, the details of the cropping-info are displayed in the "console" showing the cropping-box in scaled units (within the container) and original units (if the cropping were actually to occur), both rounded to a single decimal. Due to 'floating-point errors', there is a bit of a challenge. Each browser does its best. However, if you set the "original" unit positions to an exact number (400 instead of 388.893080), the issues of the client-side 'floating-point errors' are reduced. Remember, the final cropping will happen in integer pixels (you can't crop half a pixel), and the goal is both precision and accuracy (hopefully within a pixel).

Within the client-side, everything is really happening in container units. Now, we need to get things to happen in real units, reversing rounding and float-point foundations. We want the actual image to determine the crop box. We will utilize the function 

prepareFinalCrop
to do this. We will make this a one-way street with 
finalPrepared
which will get turned on/off with the ajax call initiation/completion. For this reason the ajax call will be stacked into a synchronous form. In addition, the method to know the final preparation is complete "onFinalPreparation" will be utilized.

You will notice, we still have a bit of rounding/float-point issues (because the current framework has the system use container-units ... worth fixing?)

However, when we get to the server-side, it will be with great confidence that what we are seeing in the preview, is what will be created.

With the ajax call (in synchronous form), we will prevent sending another call, until the previous call is finished. We will also implement some basic security measures such as page and nonce. We will send via POST (always) and use GET to pass the pseudo-nonce. Mixing security measures in the client and the server with different methods (GET, POST, SESSION) seems to help.

Again, emphasize must be made. The purpose of a cropping tool is to use the client-side to prepare a crop. The PHP backend is a demonstration only of how it can be used. Download "website-demo.zip" to get all of the included files to make the PHP stuff work (and note, these ".html" files are parsing PHP, generally set with ".htaccess").