Image Editor API

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

Image Editor Overview

The fluid image editor provides an easy way to perform basic image editing operations like crop, resize and tag in the web page. It uses the HTML5 canvas element to achieve image editing 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 an Image Editor

To instantiate a new Image Editor on your page:

var imageEditor = fluid.imageEditor(container, options);

Returns: A Image Editor 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 Image Editor markup.

options

The options object is an optional data structure that configures the Image Editor, 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

originalCanvasHeight

Integer containing the maximum height for the image canvas.

0, 1, 2, ...

originalCanvasHeight: 750

originalCanvasWidth

Integer containing the maximum width for the image canvas.

0, 1, 2, ...

originalCanvasWidth: 750

styles

Specific class names used to achieve the look and feel of the different states of the Image Editor

 

 
styles: {
	disabled: "fl-image-editor-disabled",
	hidden: "fl-image-editor-hidden",
	dim: "fl-image-editor-dim",
	border: "fl-image-editor-border",
	newTag: "fl-image-editor-tag-new",
	inlineEditableText: "flc-inlineEdit-text",
	tagLi: "flc-image-editor-tag",
	tagRemove: "flc-image-editor-tag-remove",
	selectable: "selectable"
}

strings

Strings that are used in the Image Editor. 

 

 
strings: {
	addNewTag: "create new tag",
	location: "use arrow keys or input location"
}

selectors

Javascript object containing selectors for various fragments of the uploader markup

 

See selectors below

demo

Boolean indicating whether to run in "demo" mode.  

 

demo: false

Selectors

One of the options that can be provided to the Image Editor is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:

selectors: {
    selector1Name: "selector 1 string",
    selector2Name: "selector 2 string",
      ...
}

The selectors have a default value, as defined below:

Selector Name

Description

Default

imageCanvas

The canvas element that displays the image

".flc-image-canvas"

cropButton

The Crop Button

".flc-image-editor-button-crop"

ResizeButton

The Resize Button

".flc-image-editor-button-resize"

tagButton

The Tag Button

".flc-image-editor-button-tag"

cropOptions

The container element that stores all crop options

".fl-image-editor-crop-options"

resizeOptions

The container element that stores all resize options

".fl-image-editor-resize-options"

tagOptions

The container element that stores all tag options

".fl-image-editor-tag-options"

newTagOptions

The container element that stores the create new tag form

".fl-image-editor-new-tag-options"

cropConfirm

The Confirm Crop button

".fl-image-editor-button-crop-confirm"

resizeConfirm

The Confirm Resize button

".fl-image-editor-button-resize-confirm"

tagConfirm

The Confirm Tag button

".fl-image-editor-button-tag-confirm"

cropLocation

The field that contains crop location

".fl-image-editor-crop-location"

cropWidth

The field that contains crop width

".fl-image-editor-crop-width"

cropHeight

The field that contains crop height

".fl-image-editor-crop-height"

cropFixedRatioOn

The radio button that denotes the fixed ratio for crop bounding box

".fl-image-editor-crop-radio-fixed-ratio-on"

tagLocation

The field that contains tag location

".fl-image-editor-tag-location"

tagWidth

The field that contains tag width

".fl-image-editor-tag-width"

tagHeight

The field that contains tag height

".fl-image-editor-tag-height"

resizeScale

The field that stores the resize scale in percentage

".fl-image-editor-resize-scale"

resizeWidth

The field that stores the resize width

".fl-image-editor-resize-width"

resizeHeight

The field that stores the resize height

".fl-image-editor-resize-height"

newTag

The field that stores the text for new tag to be inserted

".fl-image-editor-tag-new"

newTagLi

The "Add New Tag" list item

".fl-image-editor-tag-new-li"

existingTag

The existing tag(s) list item(s)

".fl-image-editor-tag-existing"

tagList

The list of all tags

".fl-image-editor-tag-list"

tagLi

List item for existing tag

".flc-image-editor-tag"

tagRemove

The remove button for each tag in list

".flc-image-editor-tag-remove"

Any selectors not provided as an option will revert to the default. Implementers may choose to use the default class names in their markup, or customize the selectors, or a combination of these two approaches.

For example, if your markup uses all of the default selectors, except for the crop, resize and tag confirm buttons, you would provide the following selectors option:

selectors: {
    cropConfirm: "#my-crop-confirm",
    resizeConfirm: "#my-resize-confirm",
    tagConfirm: "#my-tag-confirm"
}

Dependencies

The Image Editor dependencies can be met by including in the header of the HTML file

  • the minified InflusionAll.js file
  • the Fluid layout CSS file
  • the Inline Edit CSS file
  • the Image Editor JS file
  • the Image Editor CSS file
  • the CropperUI JS file
  • the TaggerUI JS file
  • the TaggerUI CSS 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" />
<link rel="stylesheet" type="text/css" href="infusion/src/webapp/components/inlineEdit/css/InlineEdit.css" />
<script type="text/javascript" src="infusion/src/webapp/components/imageEditor/js/ImageEditor.js"></script>
<link rel="stylesheet" type="text/css" href="infusion/src/webapp/components/ImageEditor/css/ImageEditor.css" />
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/taggerUI/js/TaggerUI.js"></script>
<link rel="stylesheet" type="text/css" href="infusion/src/webapp/components/taggerUI/css/TaggerUI.css" />

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" />
<link rel="stylesheet" type="text/css" href="../../inlineEdit/css/InlineEdit.css" />
<link rel="stylesheet" type="text/css" href="../css/ImageEditor.css" />
<link rel="stylesheet" type="text/css" href="../../taggerUI/css/TaggerUI.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>

<!-- Keyboard accessibility plugin -->
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>

<!-- Inline Edits Dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/inlineEdit/js/InlineEdit.js"></script>

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

<!-- Tagger UI dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/taggerUI/js/TaggerUI.js"></script>

<!-- Image Editor dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/imageEditor/js/ImageEditor.js"></script>