react native image editor

@React-Native-Community/Image-Editor

Modul asli editor gambar untuk React Native.

Awalnya diekstraksi dari React Native issue#23313 dan dikelola oleh masyarakat.

Memulai

Memasang

yarn add @react-native-community/image-editor
# or
npm install @react-native-community/image-editor --save

Instal pod

npx pod-install

Penggunaan

Mulailah dengan mengimpor perpustakaan:

 import ImageEditor from '@react-native-community/image-editor' ;

Gambar tanaman

Tanam gambar yang ditentukan oleh param URI. Jika URI menunjuk ke gambar jarak jauh, itu akan diunduh secara otomatis. Jika gambar tidak dapat dimuat/diunduh, janji akan ditolak.

Jika proses penanaman berhasil, gambar yang dihasilkan akan disimpan di jalur cache, dan CropResult yang dikembalikan dalam janji akan menunjuk ke gambar di jalur cache. ️ Ingatlah untuk menghapus gambar yang dipotong dari jalur cache saat Anda selesai dengan itu.

 ImageEditor . cropImage ( uri , cropData ) . then ( ( result ) => {
  console . log ( 'Cropped image uri:' , result . uri ) ;
} ) ;

cropData: ImageCropData

Nama	Jenis	Keterangan
offset	{ x: number, y: number }	Sudut kiri atas gambar yang dipotong, ditentukan dalam ruang koordinat gambar asli
size	{ width: number, height: number }	Ukuran (dimensi) dari gambar yang dipotong
displaySize (opsional)	{ width: number, height: number }	Ukuran yang ingin Anda skala gambar yang dipotong
resizeMode (opsional)	'contain' | 'cover' | 'stretch' | 'center'	UKURAN MODE UNTUK DIGUNAKAN Saat menskalakan gambar (IOS saja, mode mengubah ukuran Android selalu 'cover' , Web - tidak ada dukungan) Nilai default : 'cover'
quality (opsional)	number	Nilai dalam kisaran 0.0 - 1.0 Menentukan tingkat kompresi gambar hasil. 1 berarti tidak ada kompresi (kualitas tertinggi) dan 0 kompresi tertinggi (kualitas terendah) Nilai default : 0.9
format (opsional)	'jpeg' | 'png' | 'webp'	Format gambar yang dihasilkan. Nilai default : berdasarkan gambar yang disediakan; Jika penentuan nilai tidak dimungkinkan, 'jpeg' akan digunakan sebagai fallback. 'webp' tidak didukung oleh iOS.
includeBase64 (opsional)	boolean	Menunjukkan apakah data gambar yang diformat BASE64 juga harus dimasukkan dalam CropResult . Nilai Default : false
headers (opsional)	object | Headers	Antarmuka objek atau Headers yang mewakili header HTTP untuk dikirim bersama dengan permintaan gambar jarak jauh.

result: CropResult

Nama	Jenis	Keterangan
uri	string	Jalur ke file gambar (contoh: 'file:///data/user/0/.../image.jpg' ) Web: uri adalah string data URI (contoh 'data:image/jpeg;base64,/4AAQ...AQABAA' )
path	string	URI gambar (contoh: '/data/user/0/.../image.jpg' ) Web: path adalah URL Blob (contoh 'blob:https://example.com/43ff7a16...e46b1' )
name	string	Nama file gambar. (Contoh: 'image.jpg' )
width	number	Lebar gambar dalam piksel
height	number	Tinggi gambar dalam piksel
size	number	Ukuran gambar dalam byte
type	string	Jenis MIME dari gambar ( 'image/jpeg' , 'image/png' , 'image/webp' )
base64 (opsional)	string	Data gambar yang dikodekan base64 Contoh: '/9j/4AAQSkZJRgABAQAAAQABAAD' Jika Anda memerlukan data URI sebagai source untuk elemen Image misalnya, Anda dapat menggunakan data:${type};base64,${base64}

Untuk Penggunaan yang Lebih Tingkat Lanjut Periksa Aplikasi Contoh kami.