cordova-plugin-ImagePicker
أنا ممتن جدًا لـ Nanchen وbanchichen لتوفير الكود المصدري لدعم المصدر المفتوح متعدد النجوم، شكرًا لك. مجموعة كوكو: 273613165
أحدهما يدعم تحديدات متعددة، ويقوم الألبوم بتنفيذ وظائف مثل التقاط الصور ومعاينتها وضغطها.
وظيفة
- كتالوج الألبوم
- صورة الاختيار من متعدد
- التقاط الصور داخل الألبوم
- معاينة الصورة المحددة
- ضغط الصورة
متطلبات التثبيت
- إصدار كوردوفا >= 6.0.0
- كوردوفا-أندرويد >= 6.0.0
- كوردوفا-iOS >= 4.0.0
ثَبَّتَ
-
cordova plugin add https://github.com/giantss/cordova-plugin-ImagePicker.git
ملحوظة: لا تقم ببناء مشروع Android مباشرة أولاً، راجع احتياطات Android.
فيديو توضيحي للاندرويد
- انقر لمشاهدة الفيديو (يوكو)
عرض فيديو لنظام iOS
- انقر لمشاهدة الفيديو (يوكو)
الاداءات
أندرويد | دائرة الرقابة الداخلية |
---|
| |
الاستخدام
عرض كوردوفا الخام
// 选图
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 // 是否原图
}
لاستخدام هذا البرنامج الإضافي في ionic، عليك أن تعلن: declare let ImagePicker:any
معنى المعلمة
معلمات التكوين | معنى المعلمة |
---|
maxImagesCount | الكمية المحددة متعددة التحديد، الافتراضي هو 9 |
عرض | قم بتعيين عرض الصورة الناتجة، ويكون العرض الافتراضي تلقائيًا |
ارتفاع | قم بتعيين ارتفاع الصورة الناتجة، ويكون الارتفاع الافتراضي تلقائيًا |
جودة | جودة الصورة الافتراضية هي 80 |
EnablePickOriginal | السماح باختيار الصورة الأصلية، الافتراضي صحيح |
يلاحظ:
- المعلمات اختيارية، إذا لم يتم تمريرها، سيتم استخدام القيمة الافتراضية؛
- إذا كان العرض > 0 والارتفاع > 0: قد تكون الصورة المضغوطة أكبر من الصورة الأصلية أو أن معدل الضغط ليس مرتفعًا (على سبيل المثال، الصورة الأصلية هي 4 ميجا بايت، والصورة المضغوطة 2 ميجا بايت)، يمكن ضبط الجودة أقل ، مثل 50؛
- إذا كان العرض <0 أو الارتفاع <0: منطق الضغط قريب من منطق WeChat، ويتم تحديد الدقة المناسبة وجودة الضغط تلقائيًا، يوصى بهذه الطريقة. تستخدم مكتبة الضغط Luban وLuban-iOS. إذا واجهت مشكلات مثل الضغط غير الواضح، فيرجى تقديم مشكلات في مشروعهم؛
- عند التشغيل، يوجد زر اختيار "الصورة الأصلية" على واجهة اختيار الصورة. بعد تحديدها، تكون الصورة التي تم إرجاعها هي الصورة الأصلية غير المضغوطة.
احتياطات الروبوت
قم أولاً بإزالة المكونات الإضافية القديمة المثبتة
إذا أبلغ البناء عن الخطأ التالي
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 و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
- بانشيشين/TZImagePickerController (iOS)
مكتبة ضغط الصور
- nanchen2251/CompressHelper (أندرويد)
- كورزيبن/لوبان (أندرويد)
- GuoZhiQiang/Luban_iOS (iOS)
تحديث التعليمات
v1.2.2
- (iOS) التحسين: يتعطل iOS 13 عند تحديد صور متعددة ومشكلات أخرى
v1.2.1
- (Android) التحسين: مكتبة Glide 4.10.+ تسبب تعارضًا بين مكتبة android.support وandroidx
- (Android) التحسين: قم بإعداد تحديد الراديو أولاً، ثم قم بإعداد الاختيار المتعدد، ولكن لا يزال المحدد يواجه مشكلة في اختيار الراديو.
v1.1.9
- (iOS) أضف طريقة
takePhoto
للدخول مباشرة في التقاط الصور
v1.1.8
- (iOS) إصلاح منطق ضغط Luban
v1.1.7
- تم التحديث إلى أحدث مكتبة تحديد الصور التابعة لجهة خارجية
- تمت إضافة عنصر التكوين EnablePickOriginal (يسمح بتحديد الصورة الأصلية، أي ما إذا كان سيتم عرض خانة اختيار الصورة الأصلية)
- (iOS) يدعم تنسيق الصور HEIC
v1.1.6
- (Android) قم بإزالة مرجع بيكاسو وكود منطق التنفيذ ذي الصلة
v1.1.5
- (iOS) قم بإلغاء تحديد وظيفة رد الاتصال لدعم الصور
v1.1.4
- تزيد قيمة الإرجاع من عرض الصورة وارتفاعها وحجم الملف.
- (iOS) تم إصلاح مشكلة عدم وضوح بعض الصور عند الضغط على نظام iOS
v1.1.3
- (Android) تم إصلاح مشكلة استثناء عامل الماس في الإنشاء عند استخدام إصدارات أقل من Cordova-Android وGradle.
- (Android) أضف طريقة
takePhoto
للدخول مباشرة إلى التقاط الصور - (Android) أضف رد اتصال فشل، والذي سيتم تشغيله عند إلغاء الصورة.
v1.1.2
- (Android) تم إصلاح مشكلة أنه عند العودة إلى صفحة معاينة الصورة على بعض الهواتف المحمولة، تختفي جميع الصور الصغيرة الموجودة على حائط الصور.
v1.1.1
- (Android) متكيف مع Cordova@8 وCordova-Android@7
- (Android) تمت إعادة تسميةprovider_paths.xml، وتمت إعادة تسمية FileProvider، ولن يتعارض مع المكونات الإضافية الأخرى، وليست هناك حاجة لنسخه يدويًا إلى cordova/platform/android/res/xml/
- (Android) قم بإزالة style.xml وقم بتعيين الأنماط في التعليمات البرمجية لتجنب التعارضات مع المكونات الإضافية الأخرى التي تحتوي أيضًا على ملفات بنفس الاسم.
- (Android) تم تحديث مكتبة الصور Glide إلى الإصدار الأحدث، وهي تدعم Gif، وتم تحسين الأداء بشكل كبير. لن تكون هناك مشكلة في عدم قدرة جدار الصورة على عرض صورة المعاينة.
- (Android) أضف زر الاختيار "الصورة الأصلية" على الشريط السفلي لجدار الصورة
- (iOS) تم إصلاح المشكلة في iOS والتي تتمثل في أنه عند فحص الصورة الأصلية، تكون الصورة المرتجعة ليست الصورة الأصلية، وتكون الصورة المضغوطة أكبر من الصورة الأصلية.
- يتم تمرير المعلمات مثل الحد الأقصى لعدد الصور والعرض والارتفاع بشكل اختياري
- إذا كان العرض <0 والارتفاع <0، فسيتم تحديد الدقة المناسبة ونسبة الضغط تلقائيًا للضغط، وهو قريب من منطق الضغط الخاص بـ WeChat.
- قم بتعديل معلمة الإرجاع لرد الاتصال الناجح. تم إرجاع مصفوفة مسار الصورة الأصلية
['xxx', 'yyy']
، وهي الآن { images: ['xxx', 'yyy'], isOrigin: true/false }
رخصة
رخصة معهد ماساتشوستس للتكنولوجيا (MIT)