react native image resizer

Reagieren Sie auf den nativen Image Resizer

Warnung Seit Version 3.0.0 wurde diese Bibliothek von react-native-image-resizer nach @bam.tech/react-native-image-resizer verschoben

Aufstellen

Native reagieren >= 0,61

Seit der Version 3.0.0 unterstützt dieses Paket sofort die neue Architektur (Turbo-Modul). Es ist auch rückkompatibel mit dem alten.

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

Native reagieren <= 0,60

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

Android

Hinweis: Bei den neuesten Versionen von React Native kann es beim Gradle-Build auf Android zu einem Fehler kommen ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Führen Sie cd android && ./gradlew clean aus, um das Problem zu beheben.

Manuelle Verlinkung

Manuelle Linkinformationen für Android: Link

Anwendungsbeispiel

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

Beispiel-App

Eine einfache Beispiel-App ist im example verfügbar. Es verwendet das Modul, um die Größe eines Fotos aus der Kamerarolle zu ändern.

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

Das Versprechen wird mit einem Objekt aufgelöst, das Folgendes enthält: path , uri , name , size (Byte), width (Pixel) und height der neuen Datei. Der URI kann direkt als source einer <Image> -Komponente verwendet werden.

Option	Beschreibung
Weg	Pfad der Bilddatei oder eine Base64-codierte Bildzeichenfolge mit dem Präfix „data:image/imagetype“, wobei imagetype jpeg oder png ist.
Breite	Breite, auf die die Größe geändert werden soll (siehe mode für weitere Details)
Höhe	Höhe, auf die die Größe geändert werden soll (siehe mode für weitere Details)
compressFormat	Kann entweder JPEG, PNG oder WEBP sein (nur Android).
Qualität	Eine Zahl zwischen 0 und 100. Wird für die JPEG-Komprimierung verwendet.
Drehung	Auf das Bild anzuwendende Drehung in Grad für Android. Unter iOS ist die Drehung auf ein Vielfaches von 90 Grad begrenzt (und gerundet).
Ausgabepfad	Der verkleinerte Bildpfad. Wenn null, wird das Bild mit geänderter Größe im Cache-Ordner gespeichert. Um den Ausgabepfad festzulegen, stellen Sie sicher, dass Sie auch eine Option für die Drehung hinzufügen (wenn keine Drehung erforderlich ist, setzen Sie sie einfach auf 0).
keepMeta	Wenn true , wird versucht, alle Metadaten/Exif-Informationen der Datei mit Ausnahme des Ausrichtungswerts beizubehalten, da bei der Größenänderung auch eine Rotationskorrektur am Originalbild vorgenommen wird. Der Standardwert ist false , was bedeutet, dass alle Metadaten verloren gehen. Hinweis: Dies true nur für JPEG Bilder, die aus dem Dateisystem (nicht aus dem Web) geladen werden.
Optionen.Modus	Ähnlich wie resizeMode von React-Native Image: entweder contain (Standard), cover oder stretch . contain passt das Bild innerhalb von width und height an und behält dabei sein Verhältnis bei. cover behält das Seitenverhältnis bei und stellt sicher, dass das Bild mindestens width breit oder height hoch hat. stretch wird die Größe des Bildes auf die exakte width und height angepasst.
Optionen.onlyScaleDown	Wenn true , wird das Bild niemals vergrößert, sondern nur verkleinert.

Einschränkungen

• Wenn Sie @react-native-camera-roll/camera-roll mit aktivierter neuer Architektur verwenden, wird diese Bibliothek nicht funktionieren . Wenn Sie versuchen, mit <Image /> ein Bild mit der uri der Bibliothek anzuzeigen, wird die folgende Fehlermeldung angezeigt: No suitable image URL loader found for ph://... . Dieser Fehler kommt vom ReactNative ImageLoader , den wir derzeit verwenden. Hilfe/PR zur Lösung dieses Problems sind willkommen. Bis dahin empfehlen wir die Verwendung react-native-image-picker .
• Die EXIF-Ausrichtung von Bildern wird nur auf Android korrekt gehandhabt, jedoch noch nicht auf IOS #402.

Über Bam

Wir sind ein 100-köpfiges Unternehmen, das Multiplattform-Anwendungen mit React Native unter Verwendung der Lean & Agile-Methodik entwickelt und gestaltet. Um weitere Informationen zu den Lösungen zu erhalten, die Ihren Anforderungen entsprechen, können Sie uns gerne per E-Mail oder über unser Kontaktformular kontaktieren!

Wir werden Ihnen immer gerne antworten?