Fineuploader - add jqCrop

Question

I already implemented drag&drop image sorting with Fineuploader (using jQuery Sortable for this), and now I would like to add jqCrop support (http://adriengibrat.github.io/jQuery-crop/). Ideally I would like to let the user crop the image before upload.

What would be the best way to implent this?

Answer 1

First off, I so no reason to use jqCrop. It doesn't appear to do anything that JCrop doesn't already do, and jCrop is much more widely used (and probably tested as a result).

With that in mind, here are the steps you must follow:

Step 1: Use JCrop to gather dimensions for the new image and then draw the desired section of the image onto a <canvas>.

You'll need to so the latter part of this yourself since JCrop doesn't actually seem to modify the image. However, there's a snippet of code that shows how this can be done. The steps that the code follow are:

1. Grab dimensions of the crop from JCrop
2. Draw the image onto a <canvas>, ignoring everything outside of the cropped dimensions.
3. Grab a base64 representation of the <canvas> via a data URI. You'll need this data URI for the next step.

Step 2: Turn the cropped version of the image into a Blob

Fine Uploader already does this for it's image scaling feature internally. It seems reasonable to expose this via an API method in a future release (maybe even as part of the current or next release cycle), but, for now, you can just make use of Fine Uploader's internal "private" function that does this on the prototype of the scaling module.

Note - This code accesses a private function. It may change, be renamed, or be removed at any time. Please keep this in mind when you use this. I will be sure to update this answer once we make this all easier via an API method so direct access to this private method isn't necessary anymore:

var croppedImageAsBlob = qq.Scaler.prototype._dataUriToBlob(data_uri_from_step1_above);

Step 3: Submit the cropped Blob to Fine Uploader

The call in step 2 will return a Blob. You can then pass this Blob to Fine Uploader via the addBlobs API method like this:

uploader.addBlobs({blob: croppedImageAsBlob, name: "my cropped image.png"});

Answer 2

Clipping

It seems that jqCrop doesn't really crop anything. If you want to let users crop their images before uploading, you have to edit images with javascript which can be done with Canvas.clip()

This library works pretty well: http://blueimp.github.io/JavaScript-Load-Image/

Uploading

After image editing, you can get Base64 encoded image data from canvas then upload it to server:

Javascript:

canvas.toDataURL();

PHP:

$encodedData = str_replace(' ','+',$encodedData);
$decocedData = base64_decode($encodedData);