| Section |
|---|
| Column |
|---|
| 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.
| Note |
|---|
| title | Important note about the compatibility of Cropper UI |
|---|
| It uses the HTML5 canvas element and therefore requires a browser that supports HTML5. |
Tutorial: How to Use the Cropper UIScenarioSuppose 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. |
| Column |
|---|
| Panel |
|---|
| borderColor | #566b30 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #D3E3C4 |
|---|
| borderStyle | solid |
|---|
| title | On This Page | borderStyle
|---|
| | solid |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #c1b7c3 |
|---|
| borderStyle | solid |
|---|
| title | See Also | borderStyle | solid |
|---|
| |
| Panel |
|---|
| borderColor | #321137 |
|---|
| bgColor | #fff |
|---|
| titleBGColor | #cccccc |
|---|
| borderStyle | solid |
|---|
| title | Still need help? | borderStyle | solid |
|---|
| Join the infusion-users mailing list and ask your questions there. |
|
|
...
| Code Block |
|---|
|
myCropper.reset(true); |
...
| Anchor |
|---|
| Step 3: Add the script to your HTML |
|---|
| Step 3: Add the script to your HTML |
|---|
|
Step 3: Add the script to your HTML
...