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