ImageCropper

---

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.

---

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.

---

Fehlerzustand

Kann das Bild nicht geladen oder nicht gelesen werden — eine abgelaufene URL, ein 404 oder ein Bild von einer fremden Domain ohne CORS-Header —, zeigt der ImageCropper eine Fehlermeldung anstelle des Ausschnitts. Über onError erfährt die Anwendung davon, zum Beispiel um den Upload zurückzusetzen.

Über errorView kann die Fehlermeldung ersetzt werden, etwa um dem User eine Handlung anzubieten.

---

Kombiniere mit ...

FileDropZone

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

---

Properties

Property	Type	Description
image	string | File	The image file to crop.
errorView	ReactNode	View that is shown instead of the cropper when the image cannot be cropped. Defaults to a localized error message.
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

Events

Property	Type	Description
onCropComplete	((croppedImage: File) => void)	Callback on crop complete.
onError	((error: ImageCropperError) => void)	Callback when the image cannot be cropped, because it failed to load or could not be read.