A mobile-ready image cropper component built for high performance and usability, allowing users to upload, zoom, rotate, and crop images.
Unlock it plus 90 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.
<input type="file" (change)="fileChangeEvent($event)" accept="image/*" /> <ply-crop-image [imageChangedEvent]="imageEvent" [aspectRatio]="1 / 1" (cropped)="onCropped($event)" (canceled)="onCanceled()"> </ply-crop-image>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-crop-image-example',
imports: [
CropImageComponent
],
template: `...`
})
export class CropImageExampleComponent {}Install
npx ply-ui-cli add crop-image
Run the following command to add this component to your project:
npx ply-ui-cli add crop-image
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 |
|---|---|---|---|---|
ply-crop-image | imageFile | File | undefined | undefined | File object from ply-file-upload or programmatic use |
ply-crop-image | imageChangedEvent | Event | null | null | Native file input change event (alternative to imageFile) |
ply-crop-image | maintainAspectRatio | boolean | true | The maintainAspectRatio input property. |
ply-crop-image | aspectRatio | number | 1 | The aspectRatio input property. |
ply-crop-image | hideIfEmpty | boolean | true | The hideIfEmpty input property. |
ply-crop-image | cropperHeight | unknown | '400px' | Height of the crop viewport (CSS value). Width auto-calculates from aspect ratio. |
ply-crop-image | (cropped) | Blob | null | — | The cropped output property. |
ply-crop-image | (canceled) | void | — | The canceled output property. |
Content