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.

  Note
  title 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

Anchor
Tutorial-ImageEditor-Scenario Tutorial-ImageEditor-Scenario

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.