react native image resizer

Reaccionar el cambio de tamaño de imagen nativa

Advertencia Desde la versión 3.0.0, esta biblioteca se ha movido de react-native-image-resizer a @bam.tech/react-native-image-resizer

Configuración

Reaccionar nativo >= 0,61

Desde la versión 3.0.0 este paquete admite la nueva arquitectura lista para usar (Módulo Turbo). También tiene retrocompatibilidad con el antiguo.

 yarn add @bam.tech/react-native-image-resizer
cd ios && pod install

Reaccionar nativo <= 0,60

 yarn add [email protected]
cd ios && pod install

Androide

Nota: en las últimas versiones de React Native, es posible que tenga un error durante la compilación de Gradle en Android ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Ejecute cd android && ./gradlew clean para solucionar este problema.

Vinculación manual

Información de enlace manual para Android: Enlace

Ejemplo de uso

 import ImageResizer from '@bam.tech/react-native-image-resizer' ;

ImageResizer . createResizedImage (
  path ,
  maxWidth ,
  maxHeight ,
  compressFormat ,
  quality ,
  rotation ,
  outputPath
)
  . then ( ( response ) => {
    // response.uri is the URI of the new image that can now be displayed, uploaded...
    // response.path is the path of the new image
    // response.name is the name of the new image with the extension
    // response.size is the size of the new image
  } )
  . catch ( ( err ) => {
    // Oops, something went wrong. Check that the filename is correct and
    // inspect err to get more details.
  } ) ;

Aplicación de muestra

Una aplicación de muestra básica está disponible en la carpeta example . Utiliza el módulo para cambiar el tamaño de una foto del Camera Roll.

API

 createResizedImage (
  /**
   * uri parameter accepts`path` or `uri`.
   * This property has been tested with the output of @bam.tech/react-native-image-picker,
   * react-native-vision-camera, @react-native-camera-roll/camera-roll and http link
   **/
  uri ,
  maxWidth ,
  maxHeight ,
  compressFormat ,
  quality ,
  ( rotation = 0 ) ,
  outputPath ,
  ( keepMeta = false ) ,
  ( options = { } )
) ; // Returns a Promise

La promesa se resuelve con un objeto que contiene: path , uri , name , size (bytes), width (píxeles) y height del nuevo archivo. El URI se puede utilizar directamente como source de un componente <Image> .

Opción	Descripción
camino	Ruta del archivo de imagen, o una cadena de imagen codificada en base64 con el prefijo 'data:image/imagetype' donde imagetype es jpeg o png.
ancho	Ancho al que cambiar el tamaño (ver mode para más detalles)
altura	Altura a la que cambiar el tamaño (consulte mode para obtener más detalles)
comprimirFormato	Puede ser JPEG, PNG o WEBP (solo Android).
calidad	Un número entre 0 y 100. Se utiliza para la compresión JPEG.
rotación	Rotación a aplicar a la imagen, en grados, para android. En iOS, la rotación está limitada (y redondeada) a múltiplos de 90 grados.
ruta de salida	La ruta de la imagen redimensionada. Si es nula, la imagen redimensionada se almacenará en la carpeta de caché. Para configurar OutputPath, asegúrese de agregar también la opción de rotación (si no se necesita rotación, simplemente configúrelo en 0).
mantenerMeta	Si es true , intentará conservar todos los metadatos/información exif del archivo, excepto el valor de orientación, ya que el cambio de tamaño también corrige la rotación de la imagen original. El valor predeterminado es false , lo que significa que se pierden todos los metadatos. Nota: Esto sólo puede ser true para imágenes JPEG que se cargan desde el sistema de archivos (no desde la Web).
opciones.modo	Similar al modo de cambio de tamaño de la imagen nativa de reacción: contain (el valor predeterminado), cover o stretch . contain se ajustará a la imagen dentro width y height , preservando su proporción. cover conserva la relación de aspecto y garantiza que la imagen tenga al menos width o height alto. stretch cambiará el tamaño de la imagen exactamente al width y height .
opciones.onlyScaleDown	Si es true , nunca ampliará la imagen, solo la hará más pequeña.

Limitaciones

• Si está utilizando @react-native-camera-roll/camera-roll con la nueva arquitectura habilitada, esta biblioteca no funcionará . Si intenta mostrar una imagen con el uri de la biblioteca usando <Image /> obtendrá el siguiente error: No suitable image URL loader found for ph://... Este error proviene de ReactNative ImageLoader , que es el que estamos usando actualmente. Ayuda/PR para resolver esto son bienvenidos. Hasta entonces, recomendamos usar react-native-image-picker .
• La orientación de la imagen EXIF ​​se maneja correctamente solo en Android, pero aún no en IOS #402.

Acerca de Bam

Somos una empresa de 100 personas desarrollando y diseñando aplicaciones multiplataforma con React Native utilizando la metodología Lean & Agile. Para obtener más información sobre las soluciones que se adaptan a sus necesidades, no dude en ponerse en contacto por correo electrónico o mediante nuestro formulario de contacto.

¿Siempre te responderemos con mucho gusto?