A mobile-ready image cropper component built for high performance and usability, allowing users to upload, zoom, rotate, and crop images.
Unlock it plus 89 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Select an image to see the cropper in action.
Select an image to see the cropper in action.
Run the following command to add this component to your project:
npx base-ui-cli add crop-image
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add crop-image
// Paths are relative to aliases.components (default: src/app/components)
import { CropImageComponent } from './crop-image/crop-image.component';
@Component({
selector: 'app-your-component',
imports: [
CropImageComponent
],
template: `...`
})
export class YourComponent {} API for crop-image — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-crop-image | imageFile | File | undefined | undefined | File object from base-file-upload or programmatic use |
base-crop-image | imageChangedEvent | Event | null | null | Native file input change event (alternative to imageFile) |
base-crop-image | maintainAspectRatio | boolean | true | The maintainAspectRatio input property. |
base-crop-image | aspectRatio | number | 1 | The aspectRatio input property. |
base-crop-image | hideIfEmpty | boolean | true | The hideIfEmpty input property. |
base-crop-image | cropperHeight | unknown | '400px' | Height of the crop viewport (CSS value). Width auto-calculates from aspect ratio. |
base-crop-image | (cropped) | Blob | null | — | The cropped output property. |
base-crop-image | (canceled) | void | — | The canceled output property. |
Content