Tutorial - CropperUI

Setup: Download and install the Fluid Infusion library

1. Download a copy of the Fluid Infusion component library from:

   • http://fluidproject.org/index.php/downloads
     You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."

2. Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes. The folder will have the release number in it's name (e.g. infusion-1.3/). The rest of this tutorial will use infusion-1.3 in its examples, but if you downloaded a different version, you'll have to adjust.

3. Download the CropperUI component and place it in the infusion-1.3/src/components directory.

Step 1: Prepare your markup

The Cropper UI component associates itself with a HTML5 canvas element. Let's assume that you're starting with an HTML file, called myImageEditor.html which has a canvas element defined as follows:

The CropperUI needs to know about the 'container' of the canvas element. In this case, "flc-image-canvas-div" would be the container. That's all - these are the only changes you need to make to your HTML.

Step 2: Write the script

You'll need to create a file, say myImageEditor.js, to contain your initialization script - the script you write to apply the CropperUI to your application.

In this file, write a function that calls the cropperUI constructor. This will initialize the cropper UI component for the application :

Here the container is the container where the canvas element is contained. You can also pass additional options to the Cropper UI component using the options parameters. You can pass the following optional paramters: 

• selBoxSize: specifies the size of the selection boxes for resizing the cropper bounding box. 

• selBoxColor: the color for the selection boxes.

• borderColor: the color of border of bounding box.

•  borderWidth: the width of border of bounding box.

• highlightColor: the color of border of the highlighted selection/bounding box.

• blurColor: the color of the blurred area to be drawn around the bounding box.

• fillColor: the color of area inside the bounding box.

• INTERVAL: interval (in milliseconds) of checking if a redraw on canvas is required. 

In addition to the initialization of Cropper UI, you will need to manually notify the cropper UI whenever you would like to start cropping. To begin cropping :

Here, we pass the following parameters to the init method: 

• canvas: The canvas object with which the cropper UI should associate. 

• resizeFactor: The factor with which the image has been resized to fit in the canvas. e.g. if the original image width is 1000px and the canvas width is 500px, then the resize factor would be 2. 

• image: The image to be drawn in canvas.

• imageX: The x coordinate for image to be drawn in canvas. 

• imageY: The y coordinate for image to be drawn in canvas. 

After the init method is called, the user can use the cropper to select the bounding box from the image. You can also activate the keyboard accessibility for cropper by calling the following method: 

To confirm the crop action, call the following method: 

To cancel the crop action without actually cropping the image:

Step 3: Add the script to your HTML

You'll need to add your initialization script, along with the Fluid library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:

NOTE that the Fluid-all.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:

But all of these individual files are not necessary to make it work - the Fluid-all.js file has everything you need.

That's it! That's all you need to do to add the CropperUI functionality to your document.