react native image resizer

Bereaksi Pengubah Gambar Asli

Peringatan Sejak versi 3.0.0 perpustakaan ini telah dipindahkan dari react-native-image-resizer ke @bam.tech/react-native-image-resizer

Pengaturan

Bereaksi Asli >= 0,61

Sejak versi versi 3.0.0 paket ini mendukung arsitektur baru (Modul Turbo). Ia juga memiliki retrokompatibilitas dengan yang lama.

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

Bereaksi Asli <= 0,60

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

Android

Catatan: pada versi terbaru React Native, Anda mungkin mengalami kesalahan selama pembuatan Gradle di Android ( com.android.dex.DexException: Multiple dex files define Landroid/support/v7/appcompat/R$anim ). Jalankan cd android && ./gradlew clean untuk memperbaikinya.

Tautan manual

Informasi tautan manual untuk Android: Tautan

Contoh penggunaan

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

Contoh aplikasi

Aplikasi contoh dasar tersedia di folder example . Ia menggunakan modul untuk mengubah ukuran foto dari Rol Kamera.

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

Janji tersebut diselesaikan dengan objek yang berisi: path , uri , name , size (bytes), width (piksel), dan height file baru. URI dapat digunakan secara langsung sebagai source komponen <Image> .

Pilihan	Keterangan
jalur	Jalur file gambar, atau string gambar berkode base64 yang diawali dengan 'data:image/imagetype' dengan imagetype jpeg atau png.
lebar	Lebar yang akan diubah ukurannya (lihat mode untuk lebih jelasnya)
tinggi	Tinggi yang akan diubah ukurannya (lihat mode untuk lebih jelasnya)
kompresFormat	Bisa berupa JPEG, PNG atau WEBP (khusus Android).
kualitas	Angka antara 0 dan 100. Digunakan untuk kompresi JPEG.
rotasi	Rotasi untuk diterapkan pada gambar, dalam derajat, untuk android. Di iOS, rotasi dibatasi (dan dibulatkan) hingga kelipatan 90 derajat.
jalur keluaran	Jalur gambar yang diubah ukurannya. Jika null, gambar yang diubah ukurannya akan disimpan dalam folder cache. Untuk menyetel outputPath pastikan untuk menambahkan opsi rotasi juga (jika tidak diperlukan rotasi, setel saja ke 0).
simpanMeta	Jika true , akan berusaha mempertahankan semua metadata/info exif file, kecuali nilai orientasi karena pengubahan ukuran juga melakukan koreksi rotasi ke gambar asli. Defaultnya adalah false , yang berarti semua metadata hilang. Catatan: Ini hanya true untuk gambar JPEG yang dimuat dari sistem file (bukan Web).
pilihan.mode	Mirip dengan resizeMode Gambar asli reaksi: contain (default), cover , atau stretch . contain akan sesuai dengan gambar dalam width dan height , menjaga rasionya. cover mempertahankan rasio aspek, dan memastikan gambar setidaknya memiliki width lebar atau height tinggi. stretch akan mengubah ukuran gambar menjadi width dan height .
pilihan.onlyScaleDown	Jika true , gambar tidak akan pernah diperbesar, dan hanya akan diperkecil.

Keterbatasan

• Jika Anda menggunakan @react-native-camera-roll/camera-roll dengan arsitektur baru yang diaktifkan, perpustakaan ini tidak akan berfungsi . Jika Anda mencoba menampilkan gambar dengan uri perpustakaan menggunakan <Image /> Anda akan mendapatkan kesalahan berikut: No suitable image URL loader found for ph://... . Kesalahan ini berasal dari ReactNative ImageLoader , yang sedang kami gunakan. Bantuan/PR untuk menyelesaikan ini dipersilakan. Sampai saat itu tiba, sebaiknya gunakan react-native-image-picker .
• Orientasi gambar EXIF ​​ditangani dengan benar di Android saja, Namun belum di IOS #402.

Tentang Bam

Kami adalah perusahaan beranggotakan 100 orang yang mengembangkan dan merancang aplikasi multiplatform dengan React Native menggunakan metodologi Lean & Agile. Untuk mendapatkan informasi lebih lanjut mengenai solusi yang sesuai dengan kebutuhan Anda, jangan ragu untuk menghubungi kami melalui email atau melalui atau formulir kontak!

Kami akan selalu menjawab Anda dengan senang hati?