الفرق بين المراجعتين لصفحة: «Cordova/cordova plugin camera»
جميل-بيلوني (نقاش | مساهمات) طلا ملخص تعديل |
تحديث |
||
سطر 19: | سطر 19: | ||
من الممكن أيضًا تثبيت هذه الإضافة عبر مستودع git مباشرةً (إلا أنه غير مستقر): | من الممكن أيضًا تثبيت هذه الإضافة عبر مستودع git مباشرةً (إلا أنه غير مستقر): | ||
<syntaxhighlight lang="shell">cordova plugin add https://github.com/apache/cordova-plugin-camera.git</syntaxhighlight> | <syntaxhighlight lang="shell">cordova plugin add https://github.com/apache/cordova-plugin-camera.git</syntaxhighlight> | ||
=== ملاحظات خاصة بمنصة iOS === | === ملاحظات خاصة بمنصة iOS === | ||
سطر 77: | سطر 71: | ||
===== المنصات المدعومة ===== | ===== المنصات المدعومة ===== | ||
*أندرويد | *أندرويد | ||
*Browser | *Browser | ||
*iOS | *iOS | ||
*ويندوز | *ويندوز | ||
* | *OSX | ||
يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله. | يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله. | ||
سطر 109: | سطر 99: | ||
|} | |} | ||
إليك المثال التالي:<syntaxhighlight lang="javascript">navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);</syntaxhighlight> | إليك المثال التالي:<syntaxhighlight lang="javascript">navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);</syntaxhighlight> | ||
==== <code>camera.cleanup()</code> ==== | ==== <code>camera.cleanup()</code> ==== | ||
يزيل هذا التابع ملفات الصور الوسطية (intermediate image) التي تُحفظ في المخزن المؤقت بعد استدعاء التابع <code>camera.getPicture</code>. ويطبق فقط عندما تساوي <code>Camera.sourceType</code> القيمة <code>Camera.PictureSourceType.CAMERA</code>، وتساوي <code>Camera.destinationType</code> القيمة <code>Camera.DestinationType.FILE_URI</code>. | يزيل هذا التابع ملفات الصور الوسطية (intermediate image) التي تُحفظ في المخزن المؤقت بعد استدعاء التابع <code>camera.getPicture</code>. ويطبق فقط عندما تساوي <code>Camera.sourceType</code> القيمة <code>Camera.PictureSourceType.CAMERA</code>، وتساوي <code>Camera.destinationType</code> القيمة <code>Camera.DestinationType.FILE_URI</code>. | ||
سطر 297: | سطر 229: | ||
|اختيار الكاميرا المراد استخدامها (الأمامية أو الخلفية). | |اختيار الكاميرا المراد استخدامها (الأمامية أو الخلفية). | ||
|} | |} | ||
==== <code>Camera.DestinationType</code> ==== | ==== <code>Camera.DestinationType</code> ==== | ||
تُعرّف الخاصية <code>DestinationType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | تُعرّف الخاصية <code>DestinationType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | ||
سطر 344: | سطر 243: | ||
!الشرح | !الشرح | ||
|- | |- | ||
|<code> | |<code>DATA_URL</code> | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
سطر 354: | سطر 253: | ||
|إعادة عنوان uri الملف (<code>content://media/external/images/media/2</code> لمنصة أندرويد). | |إعادة عنوان uri الملف (<code>content://media/external/images/media/2</code> لمنصة أندرويد). | ||
|- | |- | ||
|<code> | |<code>NATIVE_URI</code> | ||
|عدد | |عدد | ||
|<code>2</code> | |<code>2</code> | ||
سطر 458: | سطر 357: | ||
|<code>ARROW_LEFT</code> | |<code>ARROW_LEFT</code> | ||
|عدد | |عدد | ||
|<code> | |<code>4</code> | ||
|- | |- | ||
|<code>ARROW_RIGHT</code> | |<code>ARROW_RIGHT</code> | ||
|عدد | |عدد | ||
|<code> | |<code>8</code> | ||
|- | |- | ||
|<code>ARROW_ANY</code> | |<code>ARROW_ANY</code> | ||
|عدد | |عدد | ||
|<code> | |<code>15</code> | ||
|} | |} | ||
سطر 522: | سطر 421: | ||
|<code>ARROW_ANY</code> | |<code>ARROW_ANY</code> | ||
|الاتجاه الذي يجب أن يشير إليه السهم في العنصر المنبثق. | |الاتجاه الذي يجب أن يشير إليه السهم في العنصر المنبثق. | ||
|- | |||
|<code>[popoverWidth]</code> | |||
|عدد | |||
|<code>0</code> | |||
|عرض العنصر المنبثق (في حال تمرير القيمة <code>0</code> أو عدم تمرير أي قيمة، ستُستخدم قيمة العرض الافتراضية لآبل) | |||
|- | |||
|<code>[popoverHeight]</code> | |||
|عدد | |||
|<code>0</code> | |||
|ارتفاع العنصر المنبثق (في حال تمرير القيمة <code>0</code> أو عدم تمرير أي قيمة، ستُستخدم قيمة العرض الافتراضية لآبل) | |||
|} | |} | ||
سطر 536: | سطر 445: | ||
destinationType: Camera.DestinationType.FILE_URI, | destinationType: Camera.DestinationType.FILE_URI, | ||
sourceType: Camera.PictureSourceType.PHOTOLIBRARY, | sourceType: Camera.PictureSourceType.PHOTOLIBRARY, | ||
popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY) | popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY, 300, 600) | ||
}); | }); | ||
// | |||
// Reposition the popover if the orientation changes. | |||
window.onorientationchange = function() { | window.onorientationchange = function() { | ||
var cameraPopoverHandle = new CameraPopoverHandle(); | var cameraPopoverHandle = new CameraPopoverHandle(); | ||
var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY); | var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY, 400, 500); | ||
cameraPopoverHandle.setPosition(cameraPopoverOptions); | cameraPopoverHandle.setPosition(cameraPopoverOptions); | ||
} | }</syntaxhighlight> | ||
== طريقة الاستخدام == | == طريقة الاستخدام == | ||
المراجعة الحالية بتاريخ 19:54، 2 ديسمبر 2020
تُعرّف إضافة الكاميرا (cordova-plugin-camera) كائنًا عامًّا هو navigator.camera
يوفر واجهة برمجية لالتقاط الصور، واختيار الصور من مكتبة الصور داخل النظام.
على الرغم من أنَّ الكائن navigator.camera
مربُوطٌ بالنطاق العام (global scope) للكائن navigator
، إلا أنه لا يكون متوفرًا إلا بعد إطلاق الحدث deviceready
.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log(navigator.camera);
}
التثبيت
يتطلب تثبيت هذه الإضافة الإصدار 5.0 من كوردوفا أو ما بعده:
cordova plugin add cordova-plugin-camera
لا يزال بالإمكان تثبيت هذه الإضافة على الإصدارات القديمة من كوردوفا عبر المُعرِّف المهمل:
cordova plugin add org.apache.cordova.camera
من الممكن أيضًا تثبيت هذه الإضافة عبر مستودع git مباشرةً (إلا أنه غير مستقر):
cordova plugin add https://github.com/apache/cordova-plugin-camera.git
ملاحظات خاصة بمنصة iOS
منذ الإصدار iOS 10، صار من الإلزامي تقديم وصف للاستخدام (usage description) في الملف info.plist
إن كنت تريد الوصول إلى البيانات الحساسة. عندما يستأذن النظام المستخدم للوصول إلى تلك المعلومات، سيُعرض وصف الاستخدام ذاك كجزء من مربع الاستئذان (permission dialog box)، ولكن إذا لم تُوفِِّر وصف الاستخدام، فسيتعطل التطبيق قبل عرض مربع الحوار. كما سترفض Apple التطبيقات التي تصل إلى البيانات الخاصة دون أن تقدم وصفًا للاستخدام.
تتطلب هذه الإضافات أوصاف الاستخدام التالية:
NSCameraUsageDescription
: يحدد سبب وصول تطبيقك إلى كاميرا الجهاز.NSPhotoLibraryUsageDescription
: يحدد سبب وصول تطبيقك إلى مكتبة صور المستخدم.NSLocationWhenInUseUsageDescription
: يحدد سبب وصول تطبيقك إلى المعلومات الجغرافية التي تحدد موقع المستخدم أثناء استخدام التطبيق. (عيِّن هذا الوصف إن تم تعيين الخيارCameraUsesGeolocation
إلى القيمةtrue
).NSPhotoLibraryAddUsageDescription
: يحدد سبب طلب تطبيقك إذن الوصول بالكتابة فقط (write-only access) إلى مكتبة صور المستخدم.
لإضافة هذه المُدخلات إلى الملف info.plist
، يمكنك استخدام الوسم edit-config
في الملف config.xml
على النحو التالي:
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>need camera access to take pictures</string>
</edit-config>
<edit-config target="NSPhotoLibraryUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to get pictures from there</string>
</edit-config>
<edit-config target="NSLocationWhenInUseUsageDescription" file="*-Info.plist" mode="merge">
<string>need location access to find things nearby</string>
</edit-config>
<edit-config target="NSPhotoLibraryAddUsageDescription" file="*-Info.plist" mode="merge">
<string>need photo library access to save pictures there</string>
</edit-config>
الواجهة البرمجية (API)
الكائن camera
في هذ القسم، نقدم وصفًا لتوابع وخاصيات الكائن camera
.
camera.getPicture(successCallback، errorCallback، options)
يُمكّن التابع getPicture
من التقاط صورة باستخدام الكاميرا، أو الحصول على صورة من معرض الصور في الجهاز.
تُمرّر الصورة إلى دالة رد نداء النجاح (success callback) كسلسلة نصية مُرمّزة بالترميز Base64، أو على هيئة عنوانٍ (URI) يشير إلى ملف الصورة.
يفتح التابع camera.getPicture
تطبيق الكاميرا الافتراضي للجهاز، والذي يسمح للمستخدمين بالتقاط الصور بشكل افتراضي، إذ يحدث هذا السلوك عندما تتساوى الخاصيتان Camera.sourceType
و Camera.PictureSourceType.CAMERA
. بمجرد أن يلتقط المستخدم الصورة، يُغلق تطبيق الكاميرا ويُسترجَع (restored) التطبيق.
إن كانت الخاصية Camera.sourceType
تساوي Camera.PictureSourceType.PHOTOLIBRARY
أو Camera.PictureSourceType.SAVEDPHOTOALBUM
، فسيظهر مربع حوار يعرض على المستخدمين اختيار إحدى الصور الموجودة.
تُرسَل القيمة المعادة إلى دالة رد نداء النجاح cameraSuccess
، وفق إحدى التنسيقات التالية، اعتمادًا على الخيار cameraOptions
المحدد:
- سلسلة نصية
String
مرمَّزة الترميز Base64 الخاص بالصورة. - سلسلة نصية
String
تمثل موضع ملف الصورة في الذاكرة المحلية (السلوك الافتراضي).
يمكنك أن تفعل ما تريد بالصورة المرمّزة أو عنواها مثل:
- عرض (Render) الصورة في الوسم
<img>
، كما هو موضح في المثال أدناه، أو - حفظها محليًّا (LocalStorage أو Lawnchair ...إلخ)، أو
- نشرها إلى خادم بعيد.
ملاحظة: دقة الصور على الأجهزة الحديثة أصبحت ممتازة. لا تُصغّر جودة الصور المختارة من معرض الجهاز، حتى عند تحديد المعامل quality
. لتجنب مشاكل الذاكرة الشائعة، اضبط الخاصية Camera.destinationType
إلى القيمة FILE_URI
بدلًا من DATA_URL
.
المنصات المدعومة
- أندرويد
- Browser
- iOS
- ويندوز
- OSX
يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله.
النوع: هو تابع ثابت (static method) للكائن camera
.
المعاملات
المعامل | النوع | الشرح |
---|---|---|
successCallback
|
onSuccess
|
رد نداء نجاح العملية. |
errorCallback
|
onError
|
رد نداء فشل العملية. |
options
|
CameraOptions
|
خيارات الكاميرا |
إليك المثال التالي:
navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);
camera.cleanup()
يزيل هذا التابع ملفات الصور الوسطية (intermediate image) التي تُحفظ في المخزن المؤقت بعد استدعاء التابع camera.getPicture
. ويطبق فقط عندما تساوي Camera.sourceType
القيمة Camera.PictureSourceType.CAMERA
، وتساوي Camera.destinationType
القيمة Camera.DestinationType.FILE_URI
.
المنصات المدعومة
- iOS
النوع: هو ثابت للكائن camera
.
مثال
مثال على استعمال التابع cleanup
:
navigator.camera.cleanup(onSuccess, onFail);
function onSuccess() {
console.log("Camera cleanup success.")
}
function onFail(message) {
alert('Failed because: ' + message);
}
camera.onError
دالة رد نداء (callback function) تُستخدم لتوفير رسالة خطأ.
النوع: اسم نوع (typedef) ثابت للكائن camera
.
المعاملات
المعامل | النوع | الشرح |
---|---|---|
message
|
سلسلة نصية | يتم توفير الرسالة عبر الشيفرة الأصلية للجهاز. |
camera.onSuccess
دالة رد نداء تُوفّر بيانات الصورة.
النوع: هو ثابت للكائن camera
المعاملات
المعامل | النوع | الشرح |
---|---|---|
imageData
|
سلسلة نصية | سلسلة نصية مرمَّزة وفق الترميز Base64 لمحتوى الصورة، أو عنوان (URI) لملف الصورة، وهذا يتحدد اعتمادًا على الخيار cameraOptions الحالي.
|
مثال
مثال على استعمال التابع onSuccess
لإظهار صورة:
// إظهار الصورة
//
function cameraCallback(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}
camera.CameraOptions
كائن يضم معاملات اختيارية لتخصيص إعدادات الكاميرا.
النوع: ثابت للكائن camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
quality
|
عدد | 50
|
جودة الصورة المحفوظة، ويعبَّر عنها بعدد من المجال 0-100، حيث يمثل العدد 100 الدقة الكاملة، دون أي خسارة نتيجة ضغط الملفات. (لاحظ أن المعلومات حول دقة الكاميرا غير متوفرة.) |
destinationType
|
DestinationType
|
FILE_URI
|
اختيار تنسيق القيمة المعادة. |
sourceType
|
PictureSourceType
|
CAMERA
|
تحديد مصدر الصورة. |
allowEdit
|
قيمة منطقية | false
|
السماح بتعديل بسيط على الصورة قبل الاختيار. |
encodingType
|
EncodingType
|
JPEG
|
اختيار ترميز ملف الصورة المعادة. |
targetWidth
|
عدد | العرض بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع targetHeight . نسبة أبعاد الصورة (Aspect ratio) تبقى ثابتة.
| |
targetHeight
|
عدد | الارتفاع بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع targetWidth . نسبة أبعاد الصور تبقى ثابتة.
| |
mediaType
|
MediaType
|
PICTURE
|
تعيين نوع الوسائط (medias) المراد الاختيار من بينها. يعمل هذا المعامل فقط عندما يساوي PictureSourceType القيمة PHOTOLIBRARY أو SAVEDPHOTOALBUM .
|
correctOrientation
|
قيمة منطقية | تدوير الصورة لتصحيح اتجاه الجهاز أثناء التقاط الصورة. | |
saveToPhotoAlbum
|
قيمة منطقية | حفظ الصورة في ألبوم الصور على الجهاز بعد التقاطها. | |
popoverOptions
|
CameraPopoverOptions
|
خيارات مخصوصة بمنصة iOS فقط، والتي تحدد موضع popover في iPad. | |
cameraDirection
|
Direction
|
BACK | اختيار الكاميرا المراد استخدامها (الأمامية أو الخلفية). |
Camera.DestinationType
تُعرّف الخاصية DestinationType
تنسيق مُخرجات استدعاء التابع Camera.getPicture
.
ملاحظة: على منصة iOS، تمرير DestinationType.NATIVE_URI
إلى جانب PictureSourceType.PHOTOLIBRARY
أو PictureSourceType.SAVEDPHOTOALBUM
سيُعطل أي تعديلات على الصورة (تغيير الحجم، تغيير الجودة، الاقتصاص، ...إلخ) بسبب اختلاف التنفيذ (implementation) من منصة إلى أخرى.
النوع: خاصية تعداد (enum) ثابتة للكائن Camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
DATA_URL
|
عدد | 0
|
تُعاد سلسلة نصية وفق الترميز base64. تركز DATAURL كثيرًا على الذاكرة، وقد تتسبب في تعطل التطبيق أو نفاذ الذاكرة. استخدم FILEURI أو NATIVE_URI إن أمكن.
|
FILE_URI
|
عدد | 1
|
إعادة عنوان uri الملف (content://media/external/images/media/2 لمنصة أندرويد).
|
NATIVE_URI
|
عدد | 2
|
إعادة العنوان uri الأصلي (مثل asset-library://... في منصة iOS).
|
Camera.EncodingType
النوع: خاصية تعداد (enum) ثابتة للكائن Camera
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
JPEG
|
عدد | 0
|
تعيد هذه الخاصية صورة بصيغة JPEG. |
PNG
|
عدد | 1
|
تعيد صورة بصيغة PNG. |
Camera.MediaType
النوع: خاصية تعداد (enum) الثابت للكائن Camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
PICTURE
|
عدد | 0
|
تمكن هذه الخاصية من اختيار الصور الثابتة وحسب. القيمة الافتراضية ستعيد التنسيق المحدد عبر DestinationType .
|
VIDEO
|
عدد | 1
|
تسمح باختيار الفيديو فقط، وتعيد العنوان URL وحسب. |
ALLMEDIA
|
عدد | 2
|
تسمح بالاختيار من جميع أنواع الوسائط. |
Camera.PictureSourceType
تعرف الخاصية PictureSourceType
تنسيق مُخرجات استدعاء التابع Camera.getPicture
.
ملاحظة: على منصة iOS، تمرير PictureSourceType.PHOTOLIBRARY
أو PictureSourceType.SAVEDPHOTOALBUM
إلى جانب DestinationType.NATIVE_URI
سيعطل أي تعديلات على الصورة (تغيير الحجم أو تغيير الجودة أو الافتصاص إلخ) بسبب اختلاف طرق التنفيذ (implementation).
النوع: خاصية تعداد (enum) ثابتة للكائن Camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
PHOTOLIBRARY
|
عدد | 0
|
اختيار صورة من مكتبة الصور في بالجهاز (تشبه SAVEDPHOTOALBUM في أندرويد). |
CAMERA
|
عدد | 1
|
التقاط صورة عبر الكاميرا. |
SAVEDPHOTOALBUM
|
عدد | 2
|
اختيار صورة من ألبوم Camera Roll الموجود في الجهاز (مثل PHOTOLIBRARY في منصة أندرويد). |
Camera.PopoverArrowDirection
تطابق هذه الخاصية الثوابت UIPopoverArrowDirection
الخاصة بمنصة iOS لتحديد موضع السهم (arrow location) على العنصر المنبثق (popover).
النوع: خاصية تعداد (enum) ثابتة للكائن Camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية |
---|---|---|
ARROW_UP
|
عدد | 1
|
ARROW_DOWN
|
عدد | 2
|
ARROW_LEFT
|
عدد | 4
|
ARROW_RIGHT
|
عدد | 8
|
ARROW_ANY
|
عدد | 15
|
Camera.Direction
النوع: خاصية تعداد (enum) ثابتة للكائن Camera
.
الخاصيات
الاسم | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
BACK
|
عدد | 0
|
استخدام الكاميرا الخلفية. |
FRONT
|
عدد | 1
|
استخدام الكاميرا الأمامية. |
CameraPopoverOptions
هذه معاملات مخصوصة بمنصة iOS فقط، إذ تحدد موضع عنصر الإرساء (anchor element) واتجاه السهم في العنصر المُنبثق (popover) عند اختيار الصور من مكتبة أو ألبوم iPad. لاحظ أنه قد يتغير حجم العنصر المنبثق حتى يتكيف مع اتجاه السهم والشاشة. تأكد من أخذ تغييرات الاتجاه بالحسبان عند تحديد موضع عنصر الإرساء.
المعامل | النوع | القيمة الافتراضية | الشرح |
---|---|---|---|
[x]
|
عدد | 0
|
عدد يمثل إحداثيات المحور x بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق. |
[y]
|
عدد | 32
|
عدد يمثل المحور y بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق. |
[width]
|
عدد | 320
|
العرض، بالبكسل، لعنصر الشاشة الذي يُرسى عليه العنصر المنبثق. |
[height]
|
عدد | 480
|
الارتفاع بالبكسل، لعنصر الشاشة الذي يُرسى عليه العنصر المنبثق. |
[arrowDir]
|
PopoverArrowDirection
|
ARROW_ANY
|
الاتجاه الذي يجب أن يشير إليه السهم في العنصر المنبثق. |
[popoverWidth]
|
عدد | 0
|
عرض العنصر المنبثق (في حال تمرير القيمة 0 أو عدم تمرير أي قيمة، ستُستخدم قيمة العرض الافتراضية لآبل)
|
[popoverHeight]
|
عدد | 0
|
ارتفاع العنصر المنبثق (في حال تمرير القيمة 0 أو عدم تمرير أي قيمة، ستُستخدم قيمة العرض الافتراضية لآبل)
|
CameraPopoverHandle
مقبض (handle) لعارض الصور المنبثق (image picker popover).
المنصات المدعومة
- iOS
مثال
navigator.camera.getPicture(onSuccess, onFail,
{
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY, 300, 600)
});
// Reposition the popover if the orientation changes.
window.onorientationchange = function() {
var cameraPopoverHandle = new CameraPopoverHandle();
var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY, 400, 500);
cameraPopoverHandle.setPosition(cameraPopoverOptions);
}
طريقة الاستخدام
تتيح لك إضافة الكاميرا القيام بعدة أمور مهمة من قبيل فتح كاميرا الجهاز والتقاط صورة، أو فتح منتقي الملفات واختيار ملف معيّن.
توضح الشيفرات البرمجية في هذا القسم مختلف المهام الممكنة، بما في ذلك:
- فتح الكاميرا والتقاط صورة.
- التقاط صورة وإعادة صورة مصغرة - thumbnail - (صورة مُعدلة الحجم).
- التقاط صورة وإنشاء كائن
FileEntry
. - اختيار صورة من مكتبة الصور.
- اختيار صورة بتنسيق JPEG وإعادة صورة مصغرة (صورة مُعدلة الحجم).
- اختيار صورة وإنشاء كائن
FileEntry
.
التقاط صورة
قبل أن تتمكن من التقاط صورة، تحتاج أولا إلى ضبط بعض خيارات إضافة الكاميرا لأجل تمريرها إلى التابع getPicture
.
في هذا المثال، سنُنشِئ الكائن الذي سنستخدمه لأجل خيارات الكاميرا، وستُعيّن الخاصية sourceType
ديناميكيًا لدعم كل من إضافة الكاميرا ومنتقي الملفات:
function setOptions(srcType) {
var options = {
// من الخيارات الشائعة: 20 - 50 - 100
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
// في هذا التطبيق، التعيين الديناميكي لمصدر الصورة أو الكاميرا أو ألبوم الصور
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true //تصحيح خصوصيات الاتجاه في أندرويد
}
return options;
}
في العادة، ستحتاج إلى استخدام FILEURI
بدلًا من DATAURL
لتجنب معظم مشاكل الذاكرة. تعد الصيغة JPEG هي الصيغة الموصى به في منصة أندرويد.
يمكنك التقاط صورة من خلال تمرير كائن الخيارات إلى التابع getPicture
، والذي سيأخذ الكائن CameraOptions
كوسيط ثالث. عند استدعاء setOptions
، قم بتمرير Camera.PictureSourceType.CAMERA
كمصدر للصورة.
function openCamera(selection) {
var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
var func = createNewFileEntry;
navigator.camera.getPicture(function cameraSuccess(imageUri) {
displayImage(imageUri);
// يمكنك نسخ الصورة أو تخزينها أو تحميلها
func(imageUri);
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
بمجرد التقاط الصورة، يمكنك إما عرضها، أو فعل شيء آخر بها. في هذا المثال، سنستدعي الدالة displayImage
من الشيفرة السابقة.
function displayImage(imgUri) {
var elem = document.getElementById('imageFile');
elem.src = imgUri;
}
لعرض الصورة على بعض المنصات، قد تحتاج إلى تضمين الجزء الرئيسي من العنوان URI في العنصر Content-Security-Policy
من الوسم <meta>
في الملف index.html
. على سبيل المثال، في منصة ويندوز 10، يمكنك تضمين ms-appdata:
في الوسم <meta>
.
إليك المثال التالي:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
التقاط صورة وإعادة صورة مصغرة
للحصول على صور أصغر، يمكنك إعادة صورة مُعدّلة الحجم عن طريق تمرير القيمتين targetHeight
و targetWidth
مع كائن الخيارات CameraOptions
. في هذا المثال، سنغيّر حجم الصورة المعادة لتلائم مربعًا بحجم 100 بكسل × 100 بكسل (يتم الحفاظ على نسبة الأبعاد [aspect ratio]، لذلك فالعدد 100 بكسل سيساوي إما الارتفاع أو العرض، مهما كان الأكبر في المصدر).
function openCamera(selection) {
var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
var func = createNewFileEntry;
if (selection == "camera-thmb") {
options.targetHeight = 100;
options.targetWidth = 100;
}
navigator.camera.getPicture(function cameraSuccess(imageUri) {
// افعل شيئا ما
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
اختيار ملف من مكتبة الصور
عند اختيار ملف باستخدام منتقي الملفات، يجب عليك أيضًا تعيين الكائن CameraOptions
. في هذا المثال، سنُعيّن الخاصية sourceType
عند القيمة Camera.PictureSourceType.SAVEDPHOTOALBUM
. ولفتح منتقي الملفات، استدع التابع getPicture
تمامًا كما فعلت في المثال السابق، مع تمرير دالة رد نداء النجاح (success callback) والخطأ (error callback) مع الكائن CameraOptions
.
function openFilePicker(selection) {
var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
var options = setOptions(srcType);
var func = createNewFileEntry;
navigator.camera.getPicture(function cameraSuccess(imageUri) {
// افعل شيئا ما
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
اختيار صورة وإعادة صورة مصغرة
تغيير حجم الملف المحدد بواسطة منتقي الملفات مشابه لتغيير الحجم باستخدام تطبيق الكاميرا. اضبط قيم الخيارات targetHeight
و targetWidth
بالشكل التالي:
function openFilePicker(selection) {
var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
var options = setOptions(srcType);
var func = createNewFileEntry;
if (selection == "picker-thmb") {
// لتصغير الصورة المختارة
// ينبغي أن تطابق نوع الصورة المختارة (JPEG مثل) Camera.EncodingType
options.targetHeight = 100;
options.targetWidth = 100;
}
navigator.camera.getPicture(function cameraSuccess(imageUri) {
// افعل شيئا ما بالصورة
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
التقاط صورة والحصول على كائن FileEntry
إن كنت تريد القيام بشيء ما مثل نسخ صورة إلى موضع آخر، أو تحميلها إلى مكان ما باستخدام الإضافة FileTransfer
، فستحتاج إلى الحصول على الكائن FileEntry
للصورة المعادة. للقيام بذلك، استدع التابع window.resolveLocalFileSystemURL
على عنوان URI الملف المُعاد من قبل تطبيق الكاميرا. إن كنت بحاجة إلى استخدام كائن FileEntry
، اضبط الخيار destinationType
إلى القيمة Camera.DestinationType.FILE_URI
في الكائن CameraOptions
(هذه هي القيمة الافتراضية).
ملاحظة: تحتاج إلى إضافة الملفات لأجل استدعاء window.resolveLocalFileSystemURL
.
في المثال التالي سنستدعي window.resolveLocalFileSystemURL
. وسنُمرّر عنوان الصورة إلى هذه الدالة عبر دالة رد نداء النجاح (success callback) الخاصة بالتابع getPicture
. يستلم معالج عملية النجاح للتابع resolveLocalFileSystemURL
الكائنَ FileEntry
.
function getFileEntry(imgUri) {
window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
// مثل الكتابة فيه أو تحميله FileEntry افعل شيئا ما بالكائن
// writeFile(fileEntry, imgUri);
console.log("got file: " + fileEntry.fullPath);
// displayFileData(fileEntry.nativeURL, "Native URL");
}, function () {
// (وهو ما يمكن أن يحدث على بعض المحاكيات) FileEntry إن لم تحصل على كائن
// جديد FileEntry قم بالنسخ في كائن
createNewFileEntry(imgUri);
});
}
في المثال الموضح في الشيفرة السابقة، يمكنك استدعاء التابع createNewFileEntry
في حال لم يكن الكائن FileEntry
الذي حصلت عليه صالحًا. يجب أن تنتج الصورة المعادة من قبل تطبيق الكاميرا كائنًا FileEntry
صالحًا، ولكن سلوك المنصات على بعض المحاكيات قد يختلف بالنسبة للملفات التي يعيدها منتقي الملفات.
يمكنك الاطلاع على مثال يوضح الكتابة في الكائن FileEntry
من هنا.
تنشئ الشيفرة التالية ملفًا في ذاكرة التخزين المؤقت لتطبيقك (في التخزين المحمي sandboxed) باسم tempFile.jpeg
. باستخدام الكائن FileEntry
الجديد، يمكنك نسخ الصورة إلى الملف، أو القيام بشيء آخر مثل تحميلها.
function createNewFileEntry(imgUri) {
window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success(dirEntry) {
// JPEG الملف
dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false }, function (fileEntry) {
// افعل شيئا به، مثل الكتابة فيه أو تحميله
// writeFile(fileEntry, imgUri);
console.log("got file: " + fileEntry.fullPath);
// displayFileData(fileEntry.fullPath, "File copied to");
}, onErrorCreateFile);
}, onErrorResolveUrl);
}