Tutorial - Image Editor

Last updated: Aug 22, 2011Version comment

4 min read

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.

On This Page

See Also

Still need help?

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."
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 use infusion-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.