react native image editor Download - react native image editor Quellcode herunterladen

react native image editor

Website-Daten

Release 4.2.1

Herunterladen

@React-Native-Community/Image-Editor

Natives Bildeditormodul für React Native.

Ursprünglich aus der React Native issue#23313 extrahiert und von der Community gepflegt.

Erste Schritte

Installieren

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

Pods installieren

npx pod-install

Verwendung

Beginnen Sie mit dem Import der Bibliothek:

 import ImageEditor from '@react-native-community/image-editor' ;

Erntebild

Ernte das im URI -Param angegebene Bild. Wenn URI auf ein Remote -Bild verweist, wird es automatisch heruntergeladen. Wenn das Bild nicht geladen/heruntergeladen werden kann, wird das Versprechen abgelehnt.

Wenn der Anbauprozess erfolgreich ist, wird das resultierende Kruppbild im Cache -Pfad gespeichert, und die im Versprechen zurückgegebene CropResult verweist auf das Bild im Cache -Pfad. Euen Denken Sie daran, das abgeschnittene Bild aus dem Cache -Pfad zu löschen, wenn Sie damit fertig sind.

 ImageEditor . cropImage ( uri , cropData ) . then ( ( result ) => {
  console . log ( 'Cropped image uri:' , result . uri ) ;
} ) ;

`cropData: ImageCropData`

Name	Typ	Beschreibung
`offset`	`{ x: number, y: number }`	Die obere linke Ecke des verkauften Bildes, angegeben im Koordinatenraum des Originalbildes
`size`	`{ width: number, height: number }`	Größe (Abmessungen) des verkürzten Bildes
`displaySize` (optional)	`{ width: number, height: number }`	Größe, auf die Sie das verkaufte Bild skalieren möchten
`resizeMode` (optional)	`'contain' \| 'cover' \| 'stretch' \| 'center'`	Die Verwendung des Bildes zum Skalieren des Bildes (nur iOS, Android -Größen -Modus ist immer `'cover'` , Web - keine Unterstützung) Standardwert : `'cover'`
`quality` (optional)	`number`	Ein Wert im Bereich von `0.0` - `1.0` Angabe des Kompressionsniveaus des Ergebnisbildes. `1` bedeutet keine Kompression (höchste Qualität) und `0` die höchste Kompression (niedrigste Qualität) Standardwert : `0.9`
`format` (optional)	`'jpeg' \| 'png' \| 'webp'`	Das Format des resultierenden Bildes. Standardwert : Basierend auf dem angegebenen Bild; Wenn die Wertbestimmung nicht möglich ist, wird `'jpeg'` als Fallback verwendet. `'webp'` wird von iOS nicht unterstützt.
`includeBase64` (optional)	`boolean`	Gibt an, ob base64 -Bilddaten ebenfalls in die `CropResult` aufgenommen werden sollten. Standardwert : `false`
`headers` (optional)	`object \| Headers`	Eine Objekt- oder `Headers` -Schnittstelle, die die HTTP -Header zusammen mit der Anfrage nach einem Remote -Bild darstellt.

`result: CropResult`

Name	Typ	Beschreibung
`uri`	`string`	Der Pfad zur Bilddatei (Beispiel: `'file:///data/user/0/.../image.jpg'` )) Web: `uri` ist die Daten -URI -Zeichenfolge (Beispiel `'data:image/jpeg;base64,/4AAQ...AQABAA'` )
`path`	`string`	Das URI des Bildes (Beispiel: `'/data/user/0/.../image.jpg'` ) Web: `path` ist die Blob -URL (Beispiel `'blob:https://example.com/43ff7a16...e46b1'` ))
`name`	`string`	Der Name der Bilddatei. (Beispiel: `'image.jpg'` )
`width`	`number`	Die Breite des Bildes in Pixeln
`height`	`number`	Höhe des Bildes in Pixeln
`size`	`number`	Die Größe des Bildes in Bytes
`type`	`string`	Der MIME -Typ des Bildes ( `'image/jpeg'` , `'image/png'` , `'image/webp'` )
`base64` (optional)	`string`	Das Basis64-kodierte Bilddaten Beispiel: `'/9j/4AAQSkZJRgABAQAAAQABAAD'` Wenn Sie Daten URI als `source` für ein `Image` benötigen, können Sie `data:${type};base64,${base64}`