Image Editor API
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.
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" } |
|
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>