This page will walk you through an example of adding the Fluid CropperUI component to your application.

This tutorial assumes that:

• you are already familiar with HTML, Javascript and CSS
• you are familiar with what the CropperUI is and does
• now you just want to know how to add it to your file.

Tutorial: How to Use the Cropper UI

Scenario

Suppose you are developing a tool for editing images on a web page. This tutorial will show you how to use the Fluid CropperUI for this.

There are four basic steps to adding the Cropper UI 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.