react native image crop picker
v0.41.5
ตัวเลือกรูปภาพ iOS/Android พร้อมรองรับกล้องวิดีโอการบีบอัดที่กำหนดค่าได้หลายภาพและการครอบตัด
นำเข้าห้องสมุด
import ImagePicker from 'react-native-image-crop-picker' ;โทรหาตัวเลือกภาพเดียวด้วยการครอบตัด
ImagePicker . openPicker ( {
width : 300 ,
height : 400 ,
cropping : true
} ) . then ( image => {
console . log ( image ) ;
} ) ;เรียกตัวเลือกรูปภาพหลายตัว
ImagePicker . openPicker ( {
multiple : true
} ) . then ( images => {
console . log ( images ) ;
} ) ;เลือกวิดีโอจากแกลเลอรี่เท่านั้น
ImagePicker . openPicker ( {
mediaType : "video" ,
} ) . then ( ( video ) => {
console . log ( video ) ;
} ) ;Android: Prop 'Cropping' เป็นที่รู้จักกันว่าทำให้วิดีโอไม่แสดงในแกลเลอรี่บน Android โปรดอย่าตั้งค่าการครอบตัดเป็นจริงเมื่อเลือกวิดีโอ
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 ) ;
} ) ; โมดูลกำลังสร้างภาพ TMP ซึ่งจะถูกทำความสะอาดโดยอัตโนมัติที่ไหนสักแห่งในอนาคต หากคุณต้องการบังคับให้ทำความสะอาดคุณสามารถใช้ clean เพื่อทำความสะอาดไฟล์ TMP ทั้งหมดหรือ cleanSingle(path) เพื่อทำความสะอาดไฟล์ TMP เดี่ยว
ImagePicker . clean ( ) . then ( ( ) => {
console . log ( 'removed all tmp images from tmp directory' ) ;
} ) . catch ( e => {
alert ( e ) ;
} ) ;| คุณสมบัติ | พิมพ์ | คำอธิบาย |
|---|---|---|
| การปลูกพืช | บูล (ค่าเริ่มต้นเท็จ) | เปิดหรือปิดการปลูกพืช |
| ความกว้าง | ตัวเลข | ความกว้างของภาพผลลัพธ์เมื่อใช้กับตัวเลือก cropping |
| ความสูง | ตัวเลข | ความสูงของภาพผลลัพธ์เมื่อใช้กับตัวเลือก cropping |
| หลายรายการ | บูล (ค่าเริ่มต้นเท็จ) | เปิดใช้งานหรือปิดใช้งานการเลือกรูปภาพหลายภาพ |
| writetempfile (iOS เท่านั้น) | บูล (ค่าเริ่มต้นจริง) | เมื่อตั้งค่าเป็นเท็จไม่ได้เขียนไฟล์ชั่วคราวสำหรับรูปภาพที่เลือก สิ่งนี้มีประโยชน์ในการปรับปรุงประสิทธิภาพเมื่อคุณดึงเนื้อหาไฟล์ด้วยตัวเลือก includeBase64 และไม่จำเป็นต้องอ่านไฟล์จากดิสก์ |
| รวม Base64 | บูล (ค่าเริ่มต้นเท็จ) | เมื่อตั้งค่าเป็น TRUE เนื้อหาไฟล์ภาพจะพร้อมใช้งานเป็นสตริงที่เข้ารหัส Base64 ในคุณสมบัติ data คำใบ้: หากต้องการใช้สตริงนี้เป็นแหล่งรูปภาพให้ใช้เช่น: <Image source={{uri: `data:${image.mime};base64,${image.data}`}} /> |
| รวมถึง | บูล (ค่าเริ่มต้นเท็จ) | รวมข้อมูลรูปภาพ Exif ในการตอบสนอง |
| หลีกเลี่ยง | บูล (ค่าเริ่มต้นจริง) | เมื่อตั้งค่าเป็นจริงรูปภาพจะเติมเต็มพื้นที่หน้ากากเสมอ |
| CropperActiveWidgetColor (Android เท่านั้น) | สตริง (ค่าเริ่มต้น "#424242" ) | เมื่อครอบตัดภาพกำหนดสีที่ใช้งานอยู่ |
| Cropperstatusbarcolor (Android เท่านั้น) | สตริง (ค่าเริ่มต้น #424242 ) | เมื่อครอบตัดภาพกำหนดสีของแถบสถานะ |
| Croppertoolbarcolor (Android เท่านั้น) | สตริง (ค่าเริ่มต้น #424242 ) | เมื่อครอบตัดภาพกำหนดสีของแถบเครื่องมือ |
| CroppertoolbarwidgetColor (Android เท่านั้น) | สตริง ( darker orange ) | เมื่อครอบตัดภาพกำหนดสีของข้อความแถบเครื่องมือและปุ่ม |
| freestylecropenabled | บูล (ค่าเริ่มต้นเท็จ) | ช่วยให้ผู้ใช้สามารถใช้พื้นที่สี่เหลี่ยมผืนผ้าที่กำหนดเองสำหรับการปลูกพืช |
| Croppertoolbartitle | สตริง ( Edit Photo เริ่มต้น) | เมื่อครอบตัดภาพกำหนดชื่อของแถบเครื่องมือ |
| Croppercircleoverlay | บูล (ค่าเริ่มต้นเท็จ) | เปิดใช้งานหรือปิดการใช้งานหน้ากากครอบตัดแบบวงกลม |
| DisableCropperColorSetters (Android เท่านั้น) | บูล (ค่าเริ่มต้นเท็จ) | เมื่อครอบตัดภาพปิดใช้งานตัวตั้งค่าสีสำหรับห้องสมุดการปลูกพืช |
| minfiles (iOS เท่านั้น) | หมายเลข (ค่าเริ่มต้น 1) | จำนวนขั้นต่ำของไฟล์ที่จะเลือกเมื่อใช้ตัวเลือก multiple |
| MaxFiles (iOS เท่านั้น) | หมายเลข (ค่าเริ่มต้น 5) | จำนวนไฟล์สูงสุดที่จะเลือกเมื่อใช้ตัวเลือก multiple |
| Waitanimationend (iOS เท่านั้น) | บูล (ค่าเริ่มต้นจริง) | สัญญาจะแก้ไข/ปฏิเสธเมื่อมีการเรียกบล็อก completion ViewController |
| SmartAlbums (iOS เท่านั้น) | Array (ค่าที่รองรับ) (ค่าเริ่มต้น ['Userlibrary', 'PhotosTream', 'Panoramas', 'วิดีโอ', 'Bursts']))) | รายการอัลบั้มอัจฉริยะให้เลือก |
| usefrontcamera | บูล (ค่าเริ่มต้นเท็จ) | ไม่ว่าจะเป็นค่าเริ่มต้นกับกล้องหน้า/'เซลฟี่' เมื่อเปิด โปรดทราบว่าอุปกรณ์ Android ทั้งหมดไม่จัดการกับพารามิเตอร์นี้ดูปัญหา #1058 |
| CompressVideOpreset (iOS เท่านั้น) | สตริง (คุณภาพกลางค่าเริ่มต้น) | เลือกว่าจะใช้ล่วงหน้าสำหรับการบีบอัดวิดีโอ |
| compressimageMaxWidth | หมายเลข (ไม่มีค่าเริ่มต้น) | บีบอัดภาพที่มีความกว้างสูงสุด |
| compressimageMaxHeight | หมายเลข (ไม่มีค่าเริ่มต้น) | บีบอัดภาพด้วยความสูงสูงสุด |
| การบีบอัดคุณภาพ | หมายเลข (ค่าเริ่มต้น 1 (Android) /0.8 (iOS))) | บีบอัดภาพที่มีคุณภาพ (จาก 0 ถึง 1 โดยที่ 1 มีคุณภาพดีที่สุด) บน iOS ค่าที่ใหญ่กว่า 0.8 ไม่ได้เพิ่มคุณภาพที่เห็นได้ชัดเจนในภาพส่วนใหญ่ในขณะที่ค่า 0.8 จะลดขนาดไฟล์ลงประมาณครึ่งหรือน้อยกว่าเมื่อเทียบกับค่า 1 |
| LoadingLabelText (iOS เท่านั้น) | สตริง (เริ่มต้น "สินทรัพย์การประมวลผล ... ") | ข้อความที่แสดงในขณะที่ภาพถ่ายกำลังโหลดในตัวเลือก |
| สื่อกลาง | สตริง (ค่าเริ่มต้นใด ๆ ) | MediaType ที่ได้รับการยอมรับสำหรับการเลือกรูปภาพสามารถเป็นหนึ่งใน: 'Photo', 'Video' หรือ 'Any' |
| showsselectedCount (iOS เท่านั้น) | บูล (ค่าเริ่มต้นจริง) | ไม่ว่าจะแสดงจำนวนสินทรัพย์ที่เลือก |
| Sortorder (iOS เท่านั้น) | สตริง (ค่าเริ่มต้น 'ไม่มี', ค่าที่รองรับ: 'asc', 'desc', 'none') | ใช้ลำดับการเรียงลำดับในวันที่สร้างขึ้นเกี่ยวกับวิธีการแสดงสื่อภายในอัลบั้ม/มุมมองภาพรายละเอียดเมื่อเปิดตัวเลือกรูปภาพ |
| forcejpg (iOS เท่านั้น) | บูล (ค่าเริ่มต้นเท็จ) | ไม่ว่าจะแปลงรูปภาพเป็น JPG สิ่งนี้จะแปลงภาพถ่ายสดเป็นตัวแทน JPG |
| showcropguidelines (Android เท่านั้น) | บูล (ค่าเริ่มต้นจริง) | ไม่ว่าจะแสดงกริด 3x3 ที่ด้านบนของภาพระหว่างการปลูกพืช |
| showcropframe (Android เท่านั้น) | บูล (ค่าเริ่มต้นจริง) | ไม่ว่าจะแสดงเฟรมพืชในระหว่างการปลูกพืช |
| HidebottomControls (Android เท่านั้น) | บูล (ค่าเริ่มต้นเท็จ) | ไม่ว่าจะแสดงการควบคุมด้านล่าง |
| Enablerotationgalsture (Android เท่านั้น) | บูล (ค่าเริ่มต้นเท็จ) | ไม่ว่าจะเปิดใช้งานการหมุนภาพด้วยท่าทางด้วยมือ |
| Cropperchoosetext (iOS เท่านั้น) | สตริง (เลือกเริ่มต้น) | เลือกข้อความปุ่ม |
| Cropperchoosecolor (iOS เท่านั้น) | สตริง (ค่าเริ่มต้น #FFCC00 ) | สีรูปแบบหกเหลี่ยมสำหรับปุ่มเลือก สีเริ่มต้นถูกควบคุมโดย TocropViewController |
| CropperCanceltext (iOS เท่านั้น) | สตริง (ยกเลิกเริ่มต้น) | ยกเลิกข้อความปุ่ม |
| CropperCancelColor (iOS เท่านั้น) | สตริง (สี iOS สีเริ่มต้น) | สีรูปแบบ Hex สำหรับปุ่มยกเลิก ค่าเริ่มต้นคือสี iOS สีเริ่มต้นที่ควบคุมโดย TocropViewController |
| CropperrotateButtonShidden (iOS เท่านั้น) | บูล (ค่าเริ่มต้นเท็จ) | เปิดใช้งานหรือปิดการใช้งานปุ่มหมุน |
หมายเหตุ: บางประเภทเหล่านี้อาจไม่สามารถใช้ได้กับ iOS ทุกรุ่น ตรวจสอบให้แน่ใจว่าได้ตรวจสอบสิ่งนี้เพื่อหลีกเลี่ยงปัญหา
['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']
| คุณสมบัติ | พิมพ์ | คำอธิบาย |
|---|---|---|
| เส้นทาง | สาย | ตำแหน่งภาพที่เลือก นี่เป็นโมฆะเมื่อตัวเลือก writeTempFile ถูกตั้งค่าเป็นเท็จ |
| LocalIdentifier (iOS เท่านั้น) | สาย | LocalIdentifier ของ Images ที่เลือกใช้สำหรับการค้นหา phasset |
| SourceUrl (iOS เท่านั้น) | สาย | เส้นทางต้นฉบับของรูปภาพที่เลือกไม่มีการเข้าถึงการเขียน |
| ชื่อไฟล์ | สาย | ชื่อไฟล์ของรูปภาพที่เลือก |
| ความกว้าง | ตัวเลข | ความกว้างของภาพที่เลือก |
| ความสูง | ตัวเลข | ความสูงของภาพที่เลือก |
| ละครใบ้ | สาย | ประเภท Mime Image Image (image/jpeg, image/png) |
| ขนาด | ตัวเลข | ขนาดภาพที่เลือกเป็นไบต์ |
| ระยะเวลา | ตัวเลข | ระยะเวลาวิดีโอในมิลลิวินาที |
| ข้อมูล | ฐาน 64 | Base64 ตัวเลือกการแสดงไฟล์ที่เลือก |
| exif | วัตถุ | แยกข้อมูล EXIF จาก Image รูปแบบการตอบสนองเป็นแพลตฟอร์มเฉพาะ |
| การตัด | วัตถุ | รูปสี่เหลี่ยมผืนผ้าที่ถูกครอบตัด (ความกว้าง, ความสูง, x, y) |
| CreationDate (iOS เท่านั้น) | สาย | การประทับเวลา UNIX เมื่อสร้างภาพ |
| ModificationDate | สาย | UNIX TIMESTAMP เมื่อภาพได้รับการแก้ไขครั้งล่าสุด |
npm i react-native-image-crop-picker --save cd ios
pod install ใน Xcode Open Info.Plist และเพิ่มคีย์สตริง NSPhotoLibraryUsageDescription ด้วยค่าที่อธิบายว่าทำไมคุณต้องเข้าถึงภาพถ่ายผู้ใช้ ข้อมูลเพิ่มเติมที่นี่ https://forums.developer.apple.com/thread/62229 ขึ้นอยู่กับคุณสมบัติที่คุณใช้คุณอาจต้องใช้ NSCameraUsageDescription และคีย์ NSMicrophoneUsageDescription
build.gradle ของคุณและเปลี่ยนเวอร์ชัน Android SDK เป็น 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
อ้างอิงสำหรับรายละเอียดเพิ่มเติม #1406
หากคุณใช้เวอร์ชัน SDK> = 33 ให้เพิ่มต่อไปนี้ใน app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/> [ไม่บังคับ] หากคุณต้องการใช้ตัวเลือกกล้องในโครงการของคุณให้เพิ่มต่อไปนี้ใน app/src/main/AndroidManifest.xml
<uses-permission android:name="android.permission.CAMERA"/> [ไม่บังคับ] หากคุณต้องการใช้กล้องด้านหน้าให้เพิ่มต่อไปนี้ใน 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" />โครงการนี้มีอยู่ขอบคุณทุกคนที่มีส่วนร่วม [มีส่วนช่วย].
ขอบคุณผู้สนับสนุนของเราทุกคน! [เป็นผู้สนับสนุน]
สนับสนุนโครงการนี้โดยการเป็นสปอนเซอร์ โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ [เป็นสปอนเซอร์]
มิกซ์
