Tutorial - Image Editor
This page will walk you through an example of adding the Fluid Image Editor component to an HTML file.
This tutorial assumes that:
- you are already familiar with HTML, Javascript and CSS
- you are familiar with what the Image Editor is and does
- now you just want to know how to add it to your file.
Important note about the compatibility of Image Editor
It uses the HTML5 canvas element and therefore requires a browser that supports HTML5.
For more general information about Image Editor, see Image Editor. For technical API documentation, see Image Editor API.
Tutorial: How to Use the Image Editor
Scenario
Suppose you are developing a tool for Optical Character Recognition. You have the tools to scan the documents. But you want to perform some image editing options on the documents before sending them on to the OCR tool. This tutorial will show you how to use the Fluid Image Editor for this.
There are four basic steps to adding the Image Editor 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.
Join the infusion-users mailing list and ask your questions there.
Setup: Download and install the Fluid Infusion library
- Download a copy of the Fluid Infusion component library from:
- http://fluidproject.org/index.php/downloads
You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
- http://fluidproject.org/index.php/downloads
- 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 useinfusion-1.3
in its examples, but if you downloaded a different version, you'll have to adjust. - Download the ImageEditor, CropperUI and TaggerUI components and place them in the infusion-1.3/src/components directory.
Step 1: Prepare your markup
There is an HTML template for the Image Editor located in your ImageEditor download bundle at imageEditor/html/ImageEditorDemo.html
. This file contains all the markup you'll need to use the ImageEditor. Use this template as a starting point for your own page, or copy/paste the markup within the div id="image-space"
into your site as desired.
The template contains all of the elements and class attributes needed by the ImageEditor. Combined with the Image Editor's style sheets, this markup will display the Image Editor on your page.
Let's assume that you're starting with an HTML file, called myapp.html, that will present the user with an interface for image editing
. This file will have to include the necessary markup for the Image Editor interface, so copy/paste the <div id="image-space">
element and everything inside it into the body of your myapp.html
file.
Step 2: Write the script
You'll need to create a file, say imageEditor.js
, to contain your initialization script - the script you write to apply the Image Editor to your markup.
In this file, write a function that calls the image editor constructor. First, you would have to build the inline edits component that would allow the user to modify the the dimensions in the image editor. All the markup for the inline edits is already built into the html file that you copied in the previous step. Write the js as follows to have the image editor added to your markup:
jQuery(document).ready(function () { // Initialize the Inline Edits component var imageEditorMenuInlineEdits = fluid.inlineEdits(".fl-image-editor-menu", { selectionEdit: true }); // Initialize the Image Editor var myImageEditor = fluid.imageEditor("#image-space", { demo: true, demoImageURL: "../temp/DemoImage.jpg", menuInlineEdits: imageEditorMenuInlineEdits }); });
The function passes the following parameters to the constructor:
- demo (optional): specifies that the component is being used in the demo mode. Uses the demoImageURL to show an image on load.
- demoImageURL (optional): URL of the image to be displayed in the demo mode.
- menuInlineEdits: the fluid inline edits object for the inline edits in image editor menu.
Important note about demo mode
The demo and demoImageURL parameters are optional. You can use the setImage method on image editor component to set a new image for the image editor. When the image editor is used without the demo mode, the user should make a call to the setImage method to display an image in the image editor canvas.
Step 3: Write 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="infusion/Fluid-all.js"></script> <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> <script type="text/javascript" src="infusion/src/webapp/components/imageEditor/js/ImageEditor.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" /> <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>
That's it! That's all you need to do to add the Image Editor functionality to your document.