react native image crop picker
v0.41.5
pemetik gambar iOS/Android dengan dukungan untuk kamera, video, kompresi yang dapat dikonfigurasi, banyak gambar dan pemangkasan
Impor Perpustakaan
import ImagePicker from 'react-native-image-crop-picker' ;Hubungi pemetik gambar tunggal dengan pemangkasan
ImagePicker . openPicker ( {
width : 300 ,
height : 400 ,
cropping : true
} ) . then ( image => {
console . log ( image ) ;
} ) ;Hubungi beberapa pemetik gambar
ImagePicker . openPicker ( {
multiple : true
} ) . then ( images => {
console . log ( images ) ;
} ) ;Pilih video hanya dari galeri
ImagePicker . openPicker ( {
mediaType : "video" ,
} ) . then ( ( video ) => {
console . log ( video ) ;
} ) ;Android: Prop 'cropping' telah diketahui menyebabkan video tidak ditampilkan di galeri di Android. Tolong jangan mengatur pemangkasan ke true saat memilih video.
ImagePicker . openCamera ( {
width : 300 ,
height : 400 ,
cropping : true ,
} ) . then ( image => {
console . log ( image ) ;
} ) ; ImagePicker . openCamera ( {
mediaType : 'video' ,
} ) . then ( image => {
console . log ( image ) ;
} ) ; ImagePicker . openCropper ( {
path : 'my-file-path.jpg' ,
width : 300 ,
height : 400
} ) . then ( image => {
console . log ( image ) ;
} ) ; Modul membuat gambar TMP yang akan dibersihkan secara otomatis di suatu tempat di masa depan. Jika Anda ingin memaksa pembersihan, Anda dapat menggunakan clean untuk membersihkan semua file TMP, atau cleanSingle(path) untuk membersihkan file TMP tunggal.
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| Milik | Jenis | Keterangan |
|---|---|---|
| pemangkasan | bool (default false) | Mengaktifkan atau menonaktifkan penanaman |
| lebar | nomor | Lebar gambar hasil saat digunakan dengan opsi cropping |
| tinggi | nomor | Tinggi gambar hasil saat digunakan dengan opsi cropping |
| banyak | bool (default false) | Mengaktifkan atau menonaktifkan beberapa pemilihan gambar |
| WriteTempFile (hanya iOS) | bool (default true) | Saat diatur ke false, tidak menulis file sementara untuk gambar yang dipilih. Ini berguna untuk meningkatkan kinerja saat Anda mengambil konten file dengan opsi includeBase64 dan tidak perlu membaca file dari disk. |
| termasukBase64 | bool (default false) | Saat diatur ke True, konten file gambar akan tersedia sebagai string yang dikodekan base64 di properti data . Hint: Untuk menggunakan string ini sebagai sumber gambar, gunakan itu seperti: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| termasuk eexif | bool (default false) | Sertakan data exif gambar dalam respons |
| hindariedpyspaceAundImage (hanya iOS) | bool (default true) | Saat diatur ke true, gambar akan selalu mengisi ruang topeng. |
| CropperactiveWidgetColor (hanya Android) | String (default "#424242" ) | Saat memangkas gambar, tentukan warna ActiveWidget. |
| CROPPERSTATUSBARCOLOR (hanya Android) | String (default #424242 ) | Saat memangkas gambar, tentukan warna statusbar. |
| CropperToolBarcolor (hanya Android) | String (default #424242 ) | Saat memangkas gambar, tentukan warna bilah alat. |
| CropperToolBarWidgetColor (hanya Android) | string (default darker orange ) | Saat memangkas gambar, tentukan warna teks dan tombol toolbar. |
| freestylecropenabled | bool (default false) | Memungkinkan pengguna untuk menerapkan area persegi panjang khusus untuk pemangkasan |
| CROPPERTOOLBARTITE | String ( Edit Photo default) | Saat memangkas gambar, tentukan judul toolbar. |
| CROPPERCIRCLEOVERLAY | bool (default false) | Aktifkan atau nonaktifkan masker penanaman melingkar. |
| DisableCropperColorsetters (hanya Android) | bool (default false) | Saat memangkas citra, nonaktifkan pemukiman warna untuk perpustakaan pemangkasan. |
| minfiles (hanya iOS) | Nomor (default 1) | Jumlah file min yang harus dipilih saat menggunakan multiple opsi |
| MaxFiles (hanya iOS) | Nomor (default 5) | Jumlah file maks yang harus dipilih saat menggunakan multiple opsi |
| waitanimationend (hanya iOS) | bool (default true) | Janji Akan Menyelesaikan/Menolak Setelah Blok completion ViewController dipanggil |
| Smartalbums (hanya iOS) | array (nilai yang didukung) (default ['userlibrary', 'photostream', 'panorama', 'video', 'ledakan'])) | Daftar album pintar untuk dipilih |
| Usefrontcamera | bool (default false) | Apakah akan default ke kamera depan/'selfie' saat dibuka. Harap dicatat bahwa tidak semua perangkat Android menangani parameter ini, lihat masalah #1058 |
| compressvideopreset (hanya iOS) | string (kualitas medium default) | Pilih preset mana yang akan digunakan untuk kompresi video |
| Compressimagemaxwidth | Nomor (tidak ada default) | Kompres gambar dengan lebar maksimum |
| Compressimagemaxheight | Nomor (tidak ada default) | Kompres gambar dengan tinggi maksimal |
| Kualitas kompresimage | Nomor (default 1 (Android) /0.8 (iOS)) | Kompres gambar dengan kualitas (dari 0 hingga 1, di mana 1 adalah kualitas terbaik). Di iOS, nilai yang lebih besar dari 0,8 tidak menghasilkan peningkatan kualitas yang nyata pada sebagian besar gambar, sedangkan nilai 0,8 akan mengurangi ukuran file sekitar setengah atau kurang dibandingkan dengan nilai 1. |
| LoadingLabeltext (hanya iOS) | String (Default "Processing Asset ...") | Teks ditampilkan saat foto dimuat di Picker |
| mediatype | string (default apapun) | Mediatype yang diterima untuk pemilihan gambar, bisa menjadi salah satu: 'foto', 'video', atau 'apa pun' |
| ShowselectectedCount (hanya iOS) | bool (default true) | Apakah akan menunjukkan jumlah aset yang dipilih |
| Sortorder (hanya iOS) | String (default 'none', nilai yang didukung: 'asc', 'desc', 'none') | Menerapkan Pesanan Sortir pada Tanggal Pembuatan tentang Bagaimana Media Ditampilkan Dalam Album/Detail Tampilan Foto Saat Membuka Pemilih Gambar |
| ForceJPG (hanya iOS) | bool (default false) | Apakah akan mengonversi foto ke jpg. Ini juga akan mengubah foto langsung menjadi representasi jpg -nya |
| showcropguidelines (hanya android) | bool (default true) | Apakah akan menunjukkan kisi 3x3 di atas gambar selama pemangkasan |
| showcropframe (hanya android) | bool (default true) | Apakah akan menunjukkan bingkai panen selama pemangkasan |
| hideBottomControls (hanya android) | bool (default false) | Apakah akan menampilkan kontrol bawah |
| EnablerotationStresture (hanya Android) | bool (default false) | Apakah akan mengaktifkan memutar gambar dengan gerakan tangan |
| cropperchoosetext (hanya iOS) | String (Default Pilih) | Pilih Teks Tombol |
| CropperChoosecolor (hanya iOS) | String (default #FFCC00 ) | Warna format hex untuk tombol pilih. Warna default dikendalikan oleh TocropViewController. |
| croppercanceltext (hanya iOS) | String (Default Cancel) | Batalkan teks tombol |
| CropperCancelColor (hanya iOS) | string (warna iOS warna default) | Warna format hex untuk tombol batal. Nilai default adalah warna iOS warna default yang dikendalikan oleh tocropview controller |
| cropperrotatebuttonshidden (hanya iOS) | bool (default false) | Aktifkan atau nonaktifkan tombol rotasi cropper |
Catatan: Beberapa jenis ini mungkin tidak tersedia di semua versi iOS. Pastikan untuk memeriksa ini untuk menghindari masalah.
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| Milik | Jenis | Keterangan |
|---|---|---|
| jalur | rangkaian | Lokasi gambar yang dipilih. Ini adalah nol ketika opsi writeTempFile diatur ke false. |
| LocalIdentifier (hanya iOS) | rangkaian | LocalIdentifier Lokal yang Dipilih, Digunakan untuk Pencarian Phasset |
| SourceUrl (hanya iOS) | rangkaian | Jalur sumber gambar yang dipilih, tidak memiliki akses menulis |
| nama file | rangkaian | Nama file gambar yang dipilih |
| lebar | nomor | Lebar gambar yang dipilih |
| tinggi | nomor | Tinggi gambar yang dipilih |
| pantomim | rangkaian | Tipe Mime gambar yang dipilih (gambar/jpeg, gambar/png) |
| ukuran | nomor | Ukuran gambar yang dipilih dalam byte |
| lamanya | nomor | Waktu durasi video dalam milidetik |
| data | base64 | Representasi File Basis Base64 Opsional |
| exif | obyek | Diekstraksi data exif dari gambar. Format respons spesifik platform |
| CROMSRECT | obyek | Rektang gambar gambar yang dipotong (lebar, tinggi, x, y) |
| CreationDate (hanya iOS) | rangkaian | Cap waktu Unix saat gambar dibuat |
| ModificationDate | rangkaian | Cap waktu unix saat gambar terakhir dimodifikasi |
npm i react-native-image-crop-picker --save cd ios
pod install Dalam XCode Open Info.plist dan tambahkan tombol string NSPhotoLibraryUsageDescription dengan nilai yang menjelaskan mengapa Anda memerlukan akses ke foto pengguna. Info lebih lanjut di sini https://forums.developer.apple.com/thread/62229. Bergantung pada fitur apa yang Anda gunakan, Anda juga mungkin perlu tombol NSCameraUsageDescription dan tombol NSMicrophoneUsageDescription .
build.gradle Anda dan ubah versi SDK Android menjadi 33. (android/build.gradle) buildscript {
ext {
buildToolsVersion = " 31.0.0 "
minSdkVersion = 21
compileSdkVersion = 33
targetSdkVersion = 33
.. .
}
}
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url " $r ootDir /../node_modules/react-native/android " }
// ADD THIS
maven { url ' https://maven.google.com ' }
// ADD THIS
maven { url " https://www.jitpack.io " }
}
}useSupportLibrary (Android/App/Build.Gradle) android {
.. .
defaultConfig {
.. .
vectorDrawables . useSupportLibrary = true
.. .
}
.. .
} 3.3.3
3.4.3
3.5.4
3.6.4
4.0.1
Referensi untuk detail lebih lanjut #1406
Jika Anda menggunakan versi SDK> = 33, tambahkan berikut ke app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [Opsional] Jika Anda ingin menggunakan pemetik kamera di proyek Anda, tambahkan berikut ke app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/> [Opsional] Jika Anda ingin menggunakan kamera depan, juga tambahkan berikut ke app/src/main/ AndroidManifest.xml
<uses-feature android:name="android.hardware.camera" android:required="false" /><uses-feature android:name="android.hardware.camera.front" android:required="false" />Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang].
Terima kasih untuk semua pendukung kami! [Menjadi pendukung]
Dukung proyek ini dengan menjadi sponsor. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menjadi sponsor]
Mit
