react native image editor

@ réactif-commerçant / éditeur d'image

Module natif de l'éditeur d'image pour React Native.

Extrait à l'origine du issue#23313 et maintenu par la communauté.

Commencer

Installer

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

Installer des pods

npx pod-install

Usage

Commencez par importer la bibliothèque:

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

Image de recadrage

Recadrer l'image spécifiée par le param de l'URI. Si URI pointe vers une image distante, il sera téléchargé automatiquement. Si l'image ne peut pas être chargée / téléchargée, la promesse sera rejetée.

Si le processus de recadrage réussit, l'image recadrée qui en résulte sera stockée dans le chemin du cache, et le CropResult renvoyé dans la promesse indiquera l'image dans le chemin du cache. ️ N'oubliez pas de supprimer l'image recadrée du chemin du cache lorsque vous en avez terminé.

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

cropData: ImageCropData

Nom	Taper	Description
offset	{ x: number, y: number }	Le coin supérieur gauche de l'image recadrée, spécifiée dans l'espace de coordonnées de l'image d'origine
size	{ width: number, height: number }	Taille (dimensions) de l'image recadrée
displaySize (facultatif)	{ width: number, height: number }	Taille à laquelle vous souhaitez mettre à l'échelle l'image recadrée
resizeMode (facultatif)	'contain' | 'cover' | 'stretch' | 'center'	Mode de redimensionnement à utiliser lors de la mise à l'échelle de l'image (iOS uniquement, le mode de rediffusion Android est toujours 'cover' , Web - pas de support) Valeur par défaut : 'cover'
quality (facultatif)	number	Une valeur entre 0.0 - 1.0 Spécification du niveau de compression de l'image du résultat. 1 signifie aucune compression (la plus haute qualité) et 0 la compression la plus élevée (qualité la plus basse) Valeur par défaut : 0.9
format (facultatif)	'jpeg' | 'png' | 'webp'	Le format de l'image résultante. Valeur par défaut : en fonction de l'image fournie; Si la détermination de la valeur n'est pas possible, 'jpeg' sera utilisée comme repli. 'webp' n'est pas pris en charge par iOS.
includeBase64 (facultatif)	boolean	Indique si les données d'image formatées Base64 doivent également être incluses dans le CropResult . Valeur par défaut : false
headers (facultatif)	object | Headers	Une interface d'objet ou Headers représentant les en-têtes HTTP à envoyer avec la demande d'image distante.

result: CropResult

Nom	Taper	Description
uri	string	Le chemin d'accès au fichier image (exemple: 'file:///data/user/0/.../image.jpg' ) Web: uri est la chaîne URI de données (Exemple 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path	string	L'URI de l'image (exemple: '/data/user/0/.../image.jpg' ) Web: path est l'URL BLOB (Exemple 'blob:https://example.com/43ff7a16...e46b1' )
name	string	Le nom du fichier image. (Exemple: 'image.jpg' )
width	number	La largeur de l'image en pixels
height	number	Hauteur de l'image en pixels
size	number	La taille de l'image en octets
type	string	Le type MIME de l'image ( 'image/jpeg' , 'image/png' , 'image/webp' )
base64 (facultatif)	string	Exemple de données d'image codées en base64: '/9j/4AAQSkZJRgABAQAAAQABAAD' Si vous avez besoin de données URI comme source d'un élément Image par exemple, vous pouvez utiliser data:${type};base64,${base64}

Pour une utilisation plus avancée, consultez notre exemple d'application.