Tutorial - CropperUI

This page will walk you through an example of adding the Fluid CropperUI component to your application.

This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the CropperUI is and does
  • now you just want to know how to add it to your file.

Important note about the compatibility of Cropper UI

It uses the HTML5 canvas element and therefore requires a browser that supports HTML5.

Tutorial: How to Use the Cropper UI

Scenario

Suppose you are developing a tool for editing images on a web page. This tutorial will show you how to use the Fluid CropperUI for this.

There are four basic steps to adding the Cropper UI to your application:

  • Setup: Download and install the Fluid Infusion library
  • Step 1: Prepare your markup
  • Step 2: Write the script
  • Step 3: Add the script to your HTML

The rest of this tutorial will explain each of these steps in detail.

On This Page
Still need help?

Join the infusion-users mailing list and ask your questions there.


Setup: Download and install the Fluid Infusion library

  1. Download a copy of the Fluid Infusion component library from:
  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:

<div class="flc-image-canvas-div">
	<canvas class="flc-image-canvas" width=750px height=750px>
	</canvas>
</div>

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 :

jQuery(document).ready(function () {
    var myCropper = fluid.cropperUI(container, options);
});

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 :

myCropper.init(canvas, resizeFactor, image, imageX, imageY);

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: 

myCropper.activateKeyboardAccessibility();

To confirm the crop action, call the following method: 

var croppingReturnValues = myCropper.reset();
var croppedImageDataURL = croppingReturnValues[0];
var croppingDimensions = croppingReturnValues[1];

To cancel the crop action without actually cropping the image:

myCropper.reset(true);

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:

<script type="text/javascript" src="fluid-0.4/fluid-components/js/Fluid-all.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>

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:

<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />

<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>

<!-- Cropper UI dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>

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.