react native image resizer

Redimensionner l'image native

Avertissement Depuis la version 3.0.0, cette bibliothèque a été déplacée de react-native-image-resizer vers @bam.tech/react-native-image-resizer

Installation

Réagir natif >= 0,61

Depuis la version 3.0.0 ce package prend en charge la nouvelle architecture prête à l'emploi (Turbo Module). Il a également une rétrocompatibilité avec l'ancien.

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

Réagir natif <= 0,60

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

Androïde

Remarque : sur les dernières versions de React Native, vous pouvez avoir une erreur lors de la construction de Gradle sur Android ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Exécutez cd android && ./gradlew clean pour résoudre ce problème.

Liaison manuelle

Informations sur le lien manuel pour Android : Lien

Exemple d'utilisation

 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.
  } ) ;

Exemple d'application

Un exemple d’application de base est disponible dans le dossier example . Il utilise le module pour redimensionner une photo de la pellicule.

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 promesse se résout avec un objet contenant : path , uri , name , size (octets), width (pixels) et height du nouveau fichier. L'URI peut être utilisé directement comme source d'un composant <Image> .

Option	Description
chemin	Chemin du fichier image ou chaîne d'image codée en base64 préfixée par « data:image/imagetype » où imagetype est jpeg ou png.
largeur	Largeur à redimensionner (voir mode pour plus de détails)
hauteur	Hauteur à redimensionner (voir mode pour plus de détails)
compresserFormat	Peut être au format JPEG, PNG ou WEBP (Android uniquement).
qualité	Un nombre compris entre 0 et 100. Utilisé pour la compression JPEG.
rotation	Rotation à appliquer à l'image, en degrés, pour Android. Sur iOS, la rotation est limitée (et arrondie) à des multiples de 90 degrés.
chemin de sortie	Le chemin de l’image redimensionnée. Si nulle, l’image redimensionnée sera stockée dans le dossier cache. Pour définir OutputPath, assurez-vous également d'ajouter une option de rotation (si aucune rotation n'est nécessaire, définissez-la simplement sur 0).
garderMeta	Si true , tentera de conserver toutes les métadonnées/informations exif du fichier, à l'exception de la valeur d'orientation, car le redimensionnement effectue également une correction de rotation de l'image d'origine. La valeur par défaut est false , ce qui signifie que toutes les métadonnées sont perdues. Remarque : Cela ne peut être true que pour les images JPEG chargées à partir du système de fichiers (et non du Web).
options.mode	Semblable au resizeMode de React-Native Image : soit contain (valeur par défaut), cover ou stretch . contain ajustera l'image dans les limites width et height , en préservant son rapport. cover préserve le rapport hauteur/largeur et garantit que l'image est au moins width ou height . stretch redimensionnera l'image exactement width et height .
options.onlyScaleDown	Si c'est true , l'image n'est jamais agrandie et ne fait que la réduire.

Limites

• Si vous utilisez @react-native-camera-roll/camera-roll avec une nouvelle architecture activée, cette bibliothèque ne fonctionnera pas . Si vous essayez d'afficher une image avec l' uri de la bibliothèque à l'aide de <Image /> vous obtiendrez l'erreur suivante : No suitable image URL loader found for ph://... . Cette erreur provient du ReactNative ImageLoader , qui est celui que nous utilisons actuellement. L'aide/RP pour résoudre ce problème est la bienvenue. D'ici là, nous vous recommandons d'utiliser react-native-image-picker .
• L'orientation EXIF ​​des images est correctement gérée sur Android uniquement, mais pas encore sur IOS #402.

À propos de Bam

Nous sommes une entreprise de 100 personnes développant et concevant des applications multiplateformes avec React Native en utilisant la méthodologie Lean & Agile. Pour obtenir plus d’informations sur les solutions qui répondraient à vos besoins, n’hésitez pas à nous contacter par email ou via notre formulaire de contact !

Nous vous répondrons toujours avec plaisir ?