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 aspect passend zum späteren Verwendungszweck.
Biete dem User eine Möglichkeit zum Zurücksetzen. So kehrt er zum Ausgangszustand des Bildes zurück.

Über das Property aspect kann das Seitenverhältnis angegeben werden.

Über das Property cropShape kann zwischen einer rechteckigen und runden Ansicht des Ausschnitts gewechselt werden.

Über die width und height Properties kann die Größe des Croppers angepasst werden.

Kombiniere den ImageCropper mit einer FileDropZone‍, um ein hochgeladenes Bild direkt zuzuschneiden.

Property	Type	Description
`image`	string \| File	The image file to crop.
`width`	Width<string \| number>default: 300	The width of the component.
`height`	Height<string \| number>default: 300	The height of the component.
`aspectRatio`	number	The aspect ratio of the crop shape.
`className`	string	The elements class name.
`cropShape`	rect \| round

Property	Type	Description
`onCropComplete`	((croppedImage: File) => void)	Callback on crop complete.