## Instructions
Use **Native Image Cropper** to let users crop, adjust, and export images directly inside your Bubble mobile app.

### Basic Setup

1. Add the **Native Image Cropper** element to your mobile page.

2. Set **Image URL** to the image you want to crop. This can be an uploaded image, a database image, an API image URL, or any valid remote image URL.

3. Choose the crop shape:
  - **Rectangle** for standard image cropping.
  - **Circle** for avatars, profile photos, and rounded image outputs.

4. Choose the crop ratio:
  - Use a fixed ratio such as `1:1`, `4:3`, `16:9`, or another custom value.
  - Enable **Lock aspect ratio** if users should not freely resize the crop area.

### Editing Features

The cropper supports:

- Image cropping.
- Image zooming.
- Pinch-to-zoom.
- Dragging/repositioning the image.
- Crop box resizing.
- Rectangle crop mode.
- Circle crop mode.
- Optional locked aspect ratio.
- Optional freeform crop area.
- Optional grid overlay.
- Optional resize handles.
- Custom crop rectangle color.
- Custom crop circle color.
- Custom resize handle color.
- Custom grid color.
- Custom editor background color.
- Configurable interaction mode.
- Crop reset.
- Crop output generation.

### Output Settings

Configure how the final cropped image should be generated:

- **Output format** controls the exported image type.
- **Output quality** controls compression/quality.
- **Output scale** controls the exported image scale.
- Use lower quality for smaller file sizes.
- Use higher quality for sharper profile, product, or document images.

### Workflow Actions

Use actions to control the cropper from Bubble workflows:

- **Crop image**: generates the cropped output.
- **Reset crop**: returns the cropper to its default crop position.
- **Set crop/config values** where available: update crop behavior dynamically.
- **Clear output**: removes the previous cropped result.
- Use crop actions from buttons such as **Crop**, **Reset**, **Save**, or **Upload**.

### States

After cropping, use the published states to continue your workflow. Depending on your setup, the cropper can provide useful output such as:

- Cropped image result.
- Crop position.
- Crop dimensions.
- Image dimensions.
- Output format.
- Crop status.
- Last exported result.

You can save these values to the database, show a preview, or send the cropped image to an API/backend.

### Recommended Use Cases

- Profile photo cropping.
- Avatar upload flows.
- Product image preparation.
- Marketplace listing images.
- Document/photo upload cleanup.
- Gallery image editing.
- Social post image cropping.
- Any mobile workflow where users need to adjust an image before saving it.

### Best Practices

- For profile images, use **Circle** crop shape with a `1:1` aspect ratio.
- For product images, use **Rectangle** crop shape with `4:3`, `1:1`, or `16:9`.
- Enable grid lines when alignment matters.
- Use resize handles when users need manual control.
- Use locked aspect ratio when you need consistent output sizes.
- Place the cropper inside a non-scrollable container if the page scroll interferes with dragging, resizing, or pinch gestures.
- Add clear workflow buttons below the cropper, such as **Crop Image**, **Reset**, and **Save**.