ImageCropper
Die ImageCropper Component wird dafür verwendet ein Bild auf ein bestimmtes Format zuzuschneiden.Playground
import { ImageCropper } from "@mittwald/flow-react-components"; <ImageCropper image="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
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.
Größe
Über die width und height Properties kann die Größe des Croppers angepasst
werden.
Kombiniere mit ...
FileDropZone
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. |