> For the complete documentation index, see [llms.txt](https://help.adalo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.adalo.com/component-basics/marketplace-components/adalo-image-cropper.md). # Adalo Image Cropper Let users pick a photo from their device gallery, then crop, rotate, flip, and zoom it before saving — right inside your Adalo app. The cropped result is available as a form value or via an On Save action, making it easy to store the image in your database or pass it to other components. Works on **Web**, **iOS**, and **Android**. ## Getting Started Add the **Adalo Image Cropper** component to your screen. By default it shows a placeholder area. Tap it to open the image editor. To pre-load an existing image (for example, a user's current profile photo), connect the **Pre-loaded Image** property to a database image field. The user can then tap the component to re-crop or replace it. To save the result, connect either: * **On Save action** — fires after the user taps Save, with the cropped image available as an action input * **Form value** — use the component inside a Form to automatically write the cropped image to a database record ## Settings ### Pre-loaded Image Connect this to an image field from your database to show an existing photo when the component loads. The user can tap to re-crop or replace it. Leave blank to start with an empty upload area. ### Circle Crop When enabled, the crop overlay is a circle instead of a rectangle. Use this for profile photos or avatar-style images. Pairs best with a square component size. ### Output Quality Controls the JPEG quality of the saved image (10–100%, default 90%). Lower values reduce file size. Values above 90% have diminishing returns on visible quality. ### Image Roundness Rounds the corners of the displayed image. Set to half the component's smallest dimension (e.g. 160 for a 320×320 component) to show a circle. The crop modal automatically mirrors this shape — rounded corners show a rounded crop preview; a full circle shows a circular crop overlay. ### Border Width Adds a border around the displayed image. Set to 0 to hide it. ### Border Color Color of the image border. ### Preview Fit Mode Controls how the saved image fills the component bounds: * **Fill (crop & center)** — image fills the box, cropping edges if needed * **Fit (show full image)** — image scales to fit entirely within the box, which may show empty space on the sides ### On Save An action that fires after the user taps Save. Two values are available: * **Cropped Image** — the result after cropping, rotating, and flipping * **Original Image** — the source image before edits Use **Cropped Image** to update a database field or display the result elsewhere. ## Toolbar Settings The Toolbar section controls the look of the edit modal. ### Background Color Background color of the modal sheet. Default is white. ### Icon Color / Label Color / Icon Size / Label Size Style the action buttons (Rotate, Flip, Choose) inside the modal. ### Save Button Color / Text Color Customize the Save button's background and text. Default is blue with white text. ### Cancel Button Color / Text Color Customize the Cancel button's background and text. Default is light gray with dark text. ### Choose Button Color / Text Color Color of the Choose Photo / Choose New button (iOS and Android). ### Re-crop Button Color / Text Color Color of the Re-crop button that appears when an image is already loaded (iOS and Android). ### Button Labels Customize the text on any button: * **Save Button Label** — default "Save" * **Cancel Button Label** — default "Cancel" * **Re-crop Button Label** — default "Re-crop" (iOS / Android) ## Zoom Bar Settings (Web) The Zoom Bar section controls the slider that appears in the web edit modal. ### Filled Color / Unfilled Color Colors of the filled (left) and unfilled (right) portions of the track. ### Track Height Height of the slider track in pixels (2–20, default 4). ### Marker Color / Marker Size Color and size of the draggable thumb. ## How It Works {% tabs %} {% tab title="Web" %} Tapping the component opens a bottom sheet modal with: * A crop area with drag-to-reposition and pinch/scroll-to-zoom * A zoom slider * Rotate Left / Rotate Right buttons (90° increments) * Flip Horizontal / Flip Vertical buttons (previewed immediately) * Cancel and Save The crop area shape automatically mirrors the **Image Roundness** and **Circle Crop** settings so you see the final shape before saving. {% endtab %} {% tab title="iOS & Android" %} Tapping the component opens a native bottom sheet with a preview of the current image. Two buttons appear when an image is loaded: * **Re-crop** — opens the native crop/zoom editor on the existing image * **Choose New** — opens the device photo library so the user can pick a different photo, then crop it When no image is loaded, a single **Choose Photo** button opens the photo library directly. {% endtab %} {% endtabs %} ## Tips * **Profile photos**: Enable Circle Crop, set Image Roundness to half the component size, and use On Save to update the user's profile image field. * **Aspect ratio**: Resize the component in the editor to set the crop ratio. A square component produces a square crop; a 16:9 rectangle produces a 16:9 crop. * **Re-editing**: Connect Pre-loaded Image to the saved database field. When the user taps the component, it loads the current image for re-cropping rather than starting blank. * **Form use**: Place the component inside a Form to skip the On Save action entirely — the cropped image writes to the database automatically when the form is submitted. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/adalo-image-cropper.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.