ImageCropper
Der ImageCropper schneidet ein Bild auf ein bestimmtes Format zu.
import { ImageCropper } from "@mittwald/flow-react-components"; <ImageCropper image="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
Best Practices
- Wähle das Seitenverhältnis über
aspectpassend zum späteren Verwendungszweck. - Biete dem User eine Möglichkeit zum Zurücksetzen. So kehrt er zum Ausgangszustand des Bildes zurück.
Seitenverhältnis
Über das Property aspect kann das Seitenverhältnis angegeben werden.
Runder Ausschnitt
Über das Property cropShape kann zwischen einer rechteckigen und runden
Ansicht des Ausschnitts gewechselt werden.
Sizes
Über die width und height Properties kann die Größe des Croppers angepasst
werden.
Kombiniere mit ...
FileDropZone
Kombiniere den ImageCropper mit einer FileDropZone, um ein hochgeladenes Bild direkt zuzuschneiden.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
image | string | File | - | The image file to crop. |
width | Width<string | number> | 300 | The width of the component. |
height | Height<string | number> | 300 | The height of the component. |
aspectRatio | number | - | The aspect ratio of the crop shape. |
className | string | - | The elements class name. |
cropShape | "rect" | "round" | - |
Events
| Property | Type | Default | Description |
|---|---|---|---|
onCropComplete | ((croppedImage: File) => void) | - | Callback on crop complete. |