react native image editor

@React-Native-Community/Image-editor

Editor de imágenes Módulo nativo para React Native.

Originalmente extraído de React Native issue#23313 y mantenido por la comunidad.

Empezando

Instalar

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

Instalar vainas

npx pod-install

Uso

Comience por importar la biblioteca:

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

Imagen de cultivo

Recorte la imagen especificada por el parámetro URI. Si URI señala una imagen remota, se descargará automáticamente. Si la imagen no se puede cargar/descargar, la promesa será rechazada.

Si el proceso de cultivo es exitoso, la imagen recortada resultante se almacenará en la ruta de la caché, y el CropResult regresó en la promesa apuntará a la imagen en la ruta del caché. ️ Recuerde eliminar la imagen recortada de la ruta de caché cuando haya terminado con ella.

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

cropData: ImageCropData

Nombre	Tipo	Descripción
offset	{ x: number, y: number }	La esquina superior izquierda de la imagen recortada, especificada en el espacio de coordenadas de la imagen original
size	{ width: number, height: number }	Tamaño (dimensiones) de la imagen recortada
displaySize (opcional)	{ width: number, height: number }	Tamaño al que desea escalar la imagen recortada
resizeMode (opcional)	'contain' | 'cover' | 'stretch' | 'center'	Modo de cambio de tamaño para usar al escalar la imagen (solo iOS, el modo de cambio de tamaño de Android siempre es 'cover' , web, sin soporte) Valor predeterminado : 'cover'
quality (opcional)	number	Un valor en el rango 0.0 - 1.0 especificando el nivel de compresión de la imagen de resultado. 1 significa que no hay compresión (más alta calidad) y 0 la compresión más alta (calidad más baja) Valor predeterminado : 0.9
format (opcional)	'jpeg' | 'png' | 'webp'	El formato de la imagen resultante. Valor predeterminado : basado en la imagen proporcionada; Si la determinación del valor no es posible, 'jpeg' se utilizará como alternativa. 'webp' no es compatible con iOS.
includeBase64 (opcional)	boolean	Indica si los datos de la imagen formateados Base64 también deben incluirse en el CropResult . Valor predeterminado : false
headers (opcional)	object | Headers	Una interfaz de objeto o Headers que representa los encabezados HTTP para enviar junto con la solicitud de una imagen remota.

result: CropResult

Nombre	Tipo	Descripción
uri	string	La ruta al archivo de imagen (ejemplo: 'file:///data/user/0/.../image.jpg' ) Web: uri es la cadena URI de datos (ejemplo 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path	string	El URI de la imagen (ejemplo: '/data/user/0/.../image.jpg' ) Web: path es la URL BLOB (ejemplo 'blob:https://example.com/43ff7a16...e46b1' )
name	string	El nombre del archivo de imagen. (Ejemplo: 'image.jpg' )
width	number	El ancho de la imagen en píxeles
height	number	Altura de la imagen en píxeles
size	number	El tamaño de la imagen en bytes
type	string	El tipo de mime de la imagen ( 'image/jpeg' , 'image/png' , 'image/webp' )
base64 (opcional)	string	El ejemplo de datos de imagen codificados en base64: '/9j/4AAQSkZJRgABAQAAAQABAAD' Si necesita URI de datos como source de un elemento Image , por ejemplo, puede usar data:${type};base64,${base64}

Para obtener un uso más avanzado, consulte nuestra aplicación de ejemplo.