Dowe

FORM

ImageCropper

ImageCropper turns image selection, framing, preview, replacement, and removal into one portable form workflow.

PLAYGROUND

Prepare a profile portrait

Select a JPEG or PNG, refine the crop inside a circular frame, and bind the applied data URL to the profile form.

Profile portrait

Use a centered image at least 256 × 256 pixels.

PROFILE READY

A consistent identity crop

The generated picker exposes edit, replace, remove, reset, cancel, and apply actions around the same bound value.

signal profileImage value:""

ImageCropper bind:profileImage label:"Profile portrait" placeholder:"Add portrait" alt:"Profile portrait preview" accept:"image/jpeg,image/png" aspectRatio:1 minWidth:256 minHeight:256 maxWidth:2048 maxHeight:2048 shape:"circle" helpText:"Use a centered image at least 256 × 256 pixels." variant:"outlined" scheme:"primary" size:"xl" name:"profile-image"

CROP CONTRACTS

Frame images for their destination

Shape defines the visible crop treatment while dimensions and aspect ratio constrain the generated image result.

Team avatar

Avatar

Product thumbnail

Catalog image

ImageCropper label:"Avatar" accept:"image/jpeg,image/png,image/webp" aspectRatio:1 minWidth:160 minHeight:160 shape:"circle" variant:"soft" scheme:"secondary" size:"lg"

ImageCropper label:"Catalog image" accept:"image/jpeg,image/png" aspectRatio:1 minWidth:600 minHeight:600 maxWidth:3000 maxHeight:3000 shape:"square" variant:"ghost" scheme:"tertiary" size:"lg"

STATES AND SCALE

Make image requirements visible

Error feedback explains rejected assets, while disabled preserves a preview when replacement is unavailable.

Organization logo

The selected image is smaller than 512 × 512 pixels.

Verified portrait

Contact an administrator to replace a verified portrait.

BEHAVIOR

A reviewable local image flow

The picker and crop operation stay target-owned. Web produces the bound data URL through generated canvas behavior.

INPUT

Explicit file types

accept limits the picker while min and max dimensions define the image contract.

CROP

Visible framing

The modal preserves the overlay, grid, resize handles, reset, cancel, and apply actions.

OUTPUT

Bound image value

bind receives the applied cropped value so the surrounding form owns one portable string.

API

Props

ImageCropper also accepts the applicable common spacing, sizing, visibility, accessibility, and shadow props.

Prop	Type	Default
No data There are no records to display

No data