Cropper UI API

Owned by Pulkit Goyal
Last updated: Aug 22, 2011Version comment
4 min read

Cropper UI Overview

The fluid Cropper UI provides an easy to use component to plug in cropping features to a canvas element in web page. The component can be used even when someone wants just to select some portion from the image without actually cropping it. It uses the HTML5 canvas element to achieve cropping and therefore requires a browser that supports HTML5. Thus it will be delivered to modern, standards-compliant browsers, including:

  • Firefox 3.6 and higher
  • Safari 4 and higher
  • Google Chrome

Creating a Cropper UI

To instantiate a new Cropper UI on your page:

var myCropper = fluid.CropperUI(container, options);

Returns: A Cropper UI component object.

Parameters

container

The container is a CSS-based selector, single-element jQuery object, or DOM element that identifies the root DOM node of the Cropper UI markup.

options

The options object is an optional data structure that configures the Cropper UI, as described in the Options section below.

On This Page
See Also
Still need help?

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

Options

Name

Description

Values

Default

selBoxSize

specifies the size of the selection boxes for resizing the cropper bounding box

1, 2, 3, ...

selBoxSize: 6

selBoxColor

the color for the selection boxes

CSS Colors

selBoxColor: 'darkred'

borderColor

the color of border of bounding box

CSS Colors

borderColor: '#CC0000'

borderWidth

the width of border of bounding box

0, 1, 2, 3, ...

borderWidth: 0

highlightColor

the color of border of the highlighted selection/bounding box

CSS Colors

highlightColor: 'yellow'

blurColor

the color of the blurred area to be drawn around the bounding box

CSS Colors

blurColor: 'rgba(255,255,255,0.4)'

fillColor

the color of area inside the bounding box

CSS Colors

fillColor: 'rgba(255,255,255,0.0)'

INTERVAL

interval (in milliseconds) of checking if a redraw on canvas is required

1, 2, 3, ...

INTERVAL: 20

Supported Events

The Cropper UI fires the following events (for more information about events in the Fluid Framework, see Events for Component Users):

Event

Type

Description

Parameters

Parameters Description

onChangeWidth

default

This event is fired whenever the width of bounding box changes.

newWidth

newWidth: the new width of the bounding box

onChangeHeight

default

This event is fired whenever the height of bounding box changes.

newHeight

newHeight: the new height of the bounding box

onChangeLocationX

default

This event is fired whenever the x location of bounding box changes.

newLocationX

newLocationX: the new x locationof the bounding box

onChangeLocationY

default

This event is fired whenever the y location of bounding box changes.

newLocationY

newLocationY: the new y location of the bounding box

afterChangeModel

default

This event is fired after any parameter of bounding box changes.

newModel

newModel: the model object after the change

Model Object

This object stores the complete model for the bounding box for the Cropper UI component. The following properties are available with the object:
x : number, // x coordinate of the bounding box
y : number, // y coordinate of the bounding box
w : number, // width of the bounding box
h : number // height of the bounding box

Methods

Method

Description

Parameters

init(canvas, resizeFactor, image, imageX, imageY, rectX, rectY, rectW, rectH)

Begins the cropping and associates itself with the canvas element.

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.
rectX, rectY, rectW, rectH (optional): The dimensions for the initial crop bounding box

reset (isNotForCrop)

Completes/Cancels the cropping process. Returns the cropped image's 'data URL' and the cropping dimensions as an array of two objects.

isNotForCrop (optional): Set to true to cancel the crop action. Ignore or pass false to perform cropping

activateKeyboardAccessibility()

Activate the keyboard accessibility of cropper.

none

deactivateKeyboardAccessibility()

Deactivate the keyboard accessibility of cropper.

none

fixDimensions()

Fixes the dimensions of the crop bounding box.

none

setLocationX(newLocationX)

Sets the x location of the crop bounding box.

newLocationX: The new x location of bounding box.

setLocationY(newLocationY)

Sets the y location of the crop bounding box.

newLocationY: The new y location of bounding box.

setWidth(newWidth)

Sets the width of the crop bounding box.

newWidth: The new width of the bounding box.

setHeight(newHeight)

Sets the height of the crop bounding box.

newHeight: The new height of the bounding box.

Dependencies

The Cropper UI dependencies can be met by including in the header of the HTML file

  • the minified InflusionAll.js file
  • the Fluid layout CSS file
  • the CropperUI JS file

as shown below:

<script type="text/javascript" src="infusion/InfusionAll.js"></script>
<link rel="stylesheet" type="text/css" href="infusion/src/webapp/framework/fss/css/fss-layout.css" />
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>

Alternatively, the individual file requirements are:

<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>