Cordova-ปลั๊กอิน-ImagePicker
ฉันรู้สึกขอบคุณ Nanchen และ banchichen มากที่ให้ซอร์สโค้ดเพื่อสนับสนุนโอเพ่นซอร์สระดับหลายดาว มันไม่ง่ายเลย ขอบคุณ กลุ่ม KouKou: 273613165
หนึ่งรองรับการเลือกหลายรายการ และอัลบั้มก็ใช้ฟังก์ชันต่างๆ เช่น การถ่ายภาพ การแสดงตัวอย่าง และการบีบอัดรูปภาพ
การทำงาน
- แคตตาล็อกอัลบั้ม
- รูปภาพหลายตัวเลือก
- ถ่ายภาพภายในอัลบั้ม
- ดูตัวอย่างรูปภาพที่เลือก
- การบีบอัดภาพ
ข้อกำหนดในการติดตั้ง
- เวอร์ชัน Cordova >= 6.0.0
- Cordova-Android >= 6.0.0
- คอร์โดวา-iOS >= 4.0.0
ติดตั้ง
-
cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git
หมายเหตุ: อย่าสร้างโปรเจ็กต์ Android โดยตรงก่อน โปรดดูข้อควรระวังของ Android
วีดีโอสาธิตระบบ Android
- คลิกเพื่อดูวิดีโอ (Youku)
วิดีโอสาธิต iOS
- คลิกเพื่อดูวิดีโอ (Youku)
การเรนเดอร์
หุ่นยนต์ | ไอโอเอส |
---|
| |
การใช้งาน
การสาธิตคอร์โดวาคร่าวๆ
// 选图
ImagePicker . getPictures ( function ( result ) {
alert ( JSON . stringify ( result ) ) ;
} , function ( err ) {
alert ( err ) ;
} , {
maximumImagesCount : 9 ,
width : 1920 ,
height : 1440 ,
quality : 100
} ) ;
// 拍照
ImagePicker . takePhoto ( function ( result ) {
alert ( JSON . stringify ( result ) ) ;
} , function ( err ) {
alert ( err ) ;
} , {
width : 1920 ,
height : 1440 ,
quality : 50
} ) ;
ผลลัพธ์การส่งคืนจะเป็นดังนี้:
// 如果是拍照,images 数组中只有一个对象
{
"images": [{
"path": "/data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817455118.jpg",
"uri": "file:///data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817455118.jpg",
"width": 720,
"height": 1280,
"size": 104871 // 文件体积(单位:字节)
}, {
"path": "/data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817464525.jpg",
"uri": "file:///data/user/0/com.pushsoft.im2/cache/ImagePicker/152783817464525.jpg",
"width": 720,
"height": 1280,
"size": 109873
}],
"isOrigin": false // 是否原图
}
หากต้องการใช้ปลั๊กอินนี้ในไอออนิก คุณต้องประกาศ: declare let ImagePicker:any
ความหมายของพารามิเตอร์
พารามิเตอร์การกำหนดค่า | ความหมายของพารามิเตอร์ |
---|
จำนวนภาพสูงสุด | จำนวนจำกัดการเลือกหลายรายการ ค่าเริ่มต้นคือ 9 |
ความกว้าง | กำหนดความกว้างของภาพที่ส่งออก โดยค่าเริ่มต้นจะเป็นแบบอัตโนมัติ |
ความสูง | กำหนดความสูงของภาพที่ส่งออก โดยค่าเริ่มต้นจะเป็นแบบอัตโนมัติ |
คุณภาพ | คุณภาพของภาพเริ่มต้นที่ 80 |
เปิดใช้งาน PickOriginal | อนุญาตให้เลือกภาพต้นฉบับ ค่าเริ่มต้นเป็นจริง |
สังเกต:
- พารามิเตอร์เป็นทางเลือก หากไม่ผ่าน ระบบจะใช้ค่าเริ่มต้น
- หากความกว้าง > 0 และความสูง > 0: รูปภาพที่บีบอัดอาจมีขนาดใหญ่กว่ารูปภาพต้นฉบับหรืออัตราการบีบอัดไม่สูง (เช่น รูปภาพต้นฉบับคือ 4MB และรูปภาพที่บีบอัดคือ 2MB) คุณสามารถตั้งค่าคุณภาพให้ต่ำลงได้ เช่น 50;
- หากความกว้าง < 0 หรือความสูง < 0: ตรรกะการบีบอัดใกล้เคียงกับ WeChat และเลือกความละเอียดและคุณภาพการบีบอัดที่เหมาะสมโดยอัตโนมัติ ไลบรารีการบีบอัดใช้ Luban และ Luban-iOS หากคุณประสบปัญหา เช่น การบีบอัดข้อมูลที่ไม่ชัดเจน โปรดแจ้งปัญหาในโครงการของพวกเขา
- เมื่อทำงาน จะมีปุ่มตัวเลือก "ภาพต้นฉบับ" บนอินเทอร์เฟซการเลือกภาพ หลังจากเลือกแล้ว ภาพที่ส่งคืนจะเป็นภาพต้นฉบับที่ไม่มีการบีบอัด
ข้อควรระวังของ Android
ขั้นแรกให้ลบปลั๊กอินเก่าที่ติดตั้งไว้ออก
หากบิลด์รายงานข้อผิดพลาดต่อไปนี้
error: resource android:attr/dialogCornerRadius not found
error: resource android:attr/fontVariationSettings not found
error: resource android:attr/ttcIndex not found
โปรดใช้ปลั๊กอิน Cordova-android-support-gradle-release เพื่อรวมเวอร์ชันไลบรารีการสนับสนุน Android ในโครงการ:
$ cordova plugin add cordova-android-support-gradle-release --variable ANDROID_SUPPORT_VERSION={required version}
ค่า {required version}
คล้ายกับ 26.+
, 27.+
, 28.+
หากคุณใช้ cordova-plugin-ImagePickersrcandroidimagepicker.gradle
และ Gradle เวอร์ชันต่ำกว่า ระบบจะไม่รองรับข้อผิดพลาด implementation
Cordova 7.1.0 และต่ำกว่า (ตรงกับ [email protected] และต่ำกว่า) cordova-plugin-ImagePickersrcandroidimagepicker.gradle
มีการเปลี่ยนแปลงเป็นการ compile
เนื่องจาก Cordova-Android เวอร์ชันต่ำกว่าใช้ Gradle เวอร์ชันต่ำกว่า และไม่รองรับ implementation
หากโครงสร้างยังคงล้มเหลว
$ cordova platform rm android
หรือ
$ cordova platform rm ios
ลบแพลตฟอร์มเก่าออกแล้วเพิ่มใหม่อีกครั้ง
โครงการอ้างอิง
รายการรูปภาพที่เลือกได้หลายรายการ
- jeasonlzy/ImagePicker (แอนดรอยด์)
- nanchen2251/ImagePicker
- CysionLiu/ImagePicker
- banchichen/TZImagePickerController (iOS)
ไลบรารีการบีบอัดรูปภาพ
- nanchen2251/CompressHelper (แอนดรอยด์)
- Curzibn/Luban (แอนดรอยด์)
- GuoZhiQiang/Luban_iOS (iOS)
อัปเดตคำแนะนำ
เวอร์ชัน 1.2.2
- การปรับปรุง (ios): iOS 13 หยุดทำงานเมื่อเลือกหลายภาพและปัญหาอื่นๆ
เวอร์ชัน 1.2.1
- การปรับปรุง (Android): Glide Library 4.10.+ ทำให้เกิดข้อขัดแย้งระหว่างไลบรารี android.support และ androidx
- การปรับปรุง (Android): ตั้งค่าการเลือกวิทยุก่อน จากนั้นตั้งค่าการเลือกหลายรายการ แต่ตัวเลือกยังคงมีปัญหาในการเลือกวิทยุอยู่
เวอร์ชัน 1.1.9
- (iOS) เพิ่มวิธี
takePhoto
เพื่อเข้าสู่การถ่ายภาพโดยตรง
เวอร์ชัน 1.1.8
- (iOS) แก้ไขตรรกะการบีบอัด Luban
เวอร์ชัน 1.1.7
- อัปเดตเป็นไลบรารีการเลือกรูปภาพของบุคคลที่สามล่าสุด
- เพิ่มรายการการกำหนดค่า EnablePickOriginal (อนุญาตให้เลือกรูปภาพต้นฉบับได้ นั่นคือ จะแสดงกล่องกาเครื่องหมายรูปภาพต้นฉบับหรือไม่)
- (iOS) รองรับรูปแบบภาพ HEIC
เวอร์ชัน 1.1.6
- (Android) ลบการอ้างอิง picasso และโค้ดตรรกะการใช้งานที่เกี่ยวข้อง
เวอร์ชัน 1.1.5
- (iOS) ยกเลิกการเลือกฟังก์ชันโทรกลับที่รองรับรูปภาพ
เวอร์ชัน 1.1.4
- ค่าที่ส่งคืนจะเพิ่มความกว้าง ความสูง และขนาดไฟล์ของรูปภาพ
- (iOS) แก้ไขปัญหาการเบลอภาพบางภาพในการบีบอัด iOS
เวอร์ชัน 1.1.3
- (Android) แก้ไขปัญหาข้อยกเว้นตัวดำเนินการเพชรในบิลด์เมื่อใช้ Cordova-Android และ Gradle เวอร์ชันต่ำกว่า
- (Android) เพิ่มวิธี
takePhoto
เพื่อเข้าสู่การถ่ายภาพโดยตรง - (Android) เพิ่มการเรียกกลับที่ล้มเหลว ซึ่งจะเกิดขึ้นเมื่อรูปภาพถูกยกเลิก
เวอร์ชัน 1.1.2
- (Android) แก้ไขปัญหาเมื่อกลับเข้าสู่หน้าแสดงตัวอย่างรูปภาพบนโทรศัพท์มือถือบางรุ่น รูปภาพเล็กๆ บนผนังรูปภาพจะหายไป
เวอร์ชัน 1.1.1
- (Android) ปรับให้เข้ากับ Cordova@8, Cordova-Android@7
- (Android)provider_paths.xml ถูกเปลี่ยนชื่อ, FileProvider ถูกเปลี่ยนชื่อ ซึ่งจะไม่ขัดแย้งกับปลั๊กอินอื่นๆ และไม่จำเป็นต้องคัดลอกไปยัง Cordova/platform/android/res/xml/ ด้วยตนเอง
- (Android) ลบ styles.xml และตั้งค่าสไตล์ในโค้ดเพื่อหลีกเลี่ยงความขัดแย้งกับปลั๊กอินอื่นๆ ที่มีไฟล์ชื่อเดียวกัน
- (Android) ไลบรารีรูปภาพ Glide ได้รับการอัปเดตเป็นเวอร์ชันล่าสุด รองรับ Gif และประสิทธิภาพได้รับการปรับปรุงอย่างมาก ไม่น่าจะมีปัญหาใดที่ผนังรูปภาพไม่สามารถแสดงภาพตัวอย่างได้
- (Android) เพิ่มปุ่มตัวเลือก "รูปภาพต้นฉบับ" ที่แถบด้านล่างของผนังรูปภาพ
- (iOS) แก้ไขปัญหาใน iOS ว่าเมื่อตรวจสอบรูปภาพต้นฉบับแล้ว ภาพที่ส่งคืนไม่ใช่รูปภาพต้นฉบับ และรูปภาพที่บีบอัดจะมีขนาดใหญ่กว่ารูปภาพต้นฉบับ
- สามารถเลือกส่งพารามิเตอร์ เช่น maximumImagesCount ความกว้าง และความสูงได้
- หากความกว้าง < 0 และความสูง < 0 ความละเอียดและอัตราส่วนการบีบอัดที่เหมาะสมจะถูกเลือกโดยอัตโนมัติสำหรับการบีบอัด ซึ่งใกล้เคียงกับตรรกะการบีบอัดของ WeChat
- แก้ไขพารามิเตอร์การส่งคืนของการเรียกกลับที่สำเร็จ อาร์เรย์เส้นทางรูปภาพดั้งเดิม
['xxx', 'yyy']
ถูกส่งคืน และตอนนี้เป็น { images: ['xxx', 'yyy'], isOrigin: true/false }
ใบอนุญาต
ใบอนุญาต MIT (MIT)