الفرق بين المراجعتين لصفحة: «Cordova/cordova plugin camera»
لا ملخص تعديل |
تحديث |
||
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:إضافة الكاميرا في كوردوفا}}</noinclude> | <noinclude>{{DISPLAYTITLE:إضافة الكاميرا في كوردوفا}}</noinclude> | ||
[[تصنيف: Cordova]] | [[تصنيف: Cordova]] | ||
[[تصنيف: | [[تصنيف: Cordova Plugin]] | ||
تُعرّف إضافة الكاميرا (cordova-plugin-camera) كائنًا عامًّا هو <code>navigator.camera</code> يوفر واجهة برمجية لالتقاط الصور، واختيار الصور من مكتبة الصور داخل النظام. | |||
تُعرّف إضافة الكاميرا ( | |||
على الرغم من | على الرغم من أنَّ الكائن <code>navigator.camera</code> مربُوطٌ بالنطاق العام (global scope) للكائن <code>navigator</code>، إلا أنه لا يكون متوفرًا إلا بعد إطلاق الحدث <code>[[Cordova/events#deviceready|deviceready]]</code>. | ||
<syntaxhighlight lang="javascript">document.addEventListener("deviceready", onDeviceReady, false); | <syntaxhighlight lang="javascript">document.addEventListener("deviceready", onDeviceReady, false); | ||
function onDeviceReady() { | function onDeviceReady() { | ||
سطر 13: | سطر 12: | ||
== التثبيت == | == التثبيت == | ||
يتطلب تثبيت هذه الإضافة الإصدار | يتطلب تثبيت هذه الإضافة الإصدار 5.0 من كوردوفا أو ما بعده: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">cordova plugin add cordova-plugin-camera</syntaxhighlight> | ||
لا يزال بالإمكان تثبيت هذه الإضافة على الإصدارات القديمة من كوردوفا عبر المُعرِّف | لا يزال بالإمكان تثبيت هذه الإضافة على الإصدارات القديمة من كوردوفا عبر المُعرِّف المهمل: | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">cordova plugin add org.apache.cordova.camera</syntaxhighlight> | ||
من الممكن أيضًا تثبيت هذه الإضافة عبر | من الممكن أيضًا تثبيت هذه الإضافة عبر مستودع git مباشرةً (إلا أنه غير مستقر): | ||
<syntaxhighlight lang=" | <syntaxhighlight lang="shell">cordova plugin add https://github.com/apache/cordova-plugin-camera.git</syntaxhighlight> | ||
=== ملاحظات خاصة بمنصة iOS === | === ملاحظات خاصة بمنصة iOS === | ||
سطر 34: | سطر 27: | ||
* <code>NSCameraUsageDescription</code>: يحدد سبب وصول تطبيقك إلى كاميرا الجهاز. | * <code>NSCameraUsageDescription</code>: يحدد سبب وصول تطبيقك إلى كاميرا الجهاز. | ||
* <code>NSPhotoLibraryUsageDescription</code>: يحدد سبب وصول تطبيقك إلى مكتبة صور المستخدم. | * <code>NSPhotoLibraryUsageDescription</code>: يحدد سبب وصول تطبيقك إلى مكتبة صور المستخدم. | ||
* <code>NSLocationWhenInUseUsageDescription</code>: يحدد سبب وصول تطبيقك إلى المعلومات الجغرافية التي تحدد موقع المستخدم أثناء استخدام التطبيق. (عيِّن هذا الوصف إن تم تعيين الخيار<code>CameraUsesGeolocation</code> | * <code>NSLocationWhenInUseUsageDescription</code>: يحدد سبب وصول تطبيقك إلى المعلومات الجغرافية التي تحدد موقع المستخدم أثناء استخدام التطبيق. (عيِّن هذا الوصف إن تم تعيين الخيار <code>CameraUsesGeolocation</code> إلى القيمة <code>true</code>). | ||
* <code>NSPhotoLibraryAddUsageDescription</code>: يحدد سبب طلب تطبيقك | * <code>NSPhotoLibraryAddUsageDescription</code>: يحدد سبب طلب تطبيقك إذن الوصول بالكتابة فقط (write-only access) إلى مكتبة صور المستخدم. | ||
لإضافة هذه المُدخلات إلى الملف <code>info.plist</code>، يمكنك استخدام الوسم <code>edit-config</code> في الملف <code>[[Cordova#.D8.A7.D9.84.D9.85.D9.84.D9.81 Config.xml|config.xml]]</code> على النحو التالي: | لإضافة هذه المُدخلات إلى الملف <code>info.plist</code>، يمكنك استخدام الوسم <code>edit-config</code> في الملف <code>[[Cordova#.D8.A7.D9.84.D9.85.D9.84.D9.81 Config.xml|config.xml]]</code> على النحو التالي: | ||
سطر 54: | سطر 47: | ||
=== الكائن <code>camera</code> === | === الكائن <code>camera</code> === | ||
في هذ | في هذ القسم، نقدم وصفًا لتوابع وخاصيات الكائن <code>camera</code>. | ||
==== <code>camera.getPicture (successCallback، errorCallback، options)</code> ==== | ==== <code>camera.getPicture(successCallback، errorCallback، options)</code> ==== | ||
يُمكّن | يُمكّن التابع <code>getPicture</code> من التقاط صورة باستخدام الكاميرا، أو الحصول على صورة من معرض الصور في الجهاز. | ||
تُمرّر الصورة إلى دالة النجاح (success callback) كسلسلة نصية مُرمّزة بالترميز Base64، أو على هيئة عنوانٍ (URI) يشير إلى ملف الصورة. | تُمرّر الصورة إلى دالة رد نداء النجاح (success callback) كسلسلة نصية مُرمّزة بالترميز Base64، أو على هيئة عنوانٍ (URI) يشير إلى ملف الصورة. | ||
يفتح التابع <code>camera.getPicture</code> تطبيق الكاميرا الافتراضي للجهاز، والذي يسمح للمستخدمين بالتقاط الصور بشكل | يفتح التابع <code>camera.getPicture</code> تطبيق الكاميرا الافتراضي للجهاز، والذي يسمح للمستخدمين بالتقاط الصور بشكل افتراضي، إذ يحدث هذا السلوك عندما تتساوى الخاصيتان <code>Camera.sourceType</code> و <code>Camera.PictureSourceType.CAMERA</code>. بمجرد أن يلتقط المستخدم الصورة، يُغلق تطبيق الكاميرا ويُسترجَع (restored) التطبيق. | ||
إن كانت الخاصية <code>Camera.sourceType</code> تساوي <code>Camera.PictureSourceType.PHOTOLIBRARY</code> أو <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code>، فسيظهر مربع حوار يعرض على المستخدمين اختيار إحدى الصور الموجودة. | إن كانت الخاصية <code>Camera.sourceType</code> تساوي <code>Camera.PictureSourceType.PHOTOLIBRARY</code> أو <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code>، فسيظهر مربع حوار يعرض على المستخدمين اختيار إحدى الصور الموجودة. | ||
تُرسَل القيمة المعادة إلى دالة رد نداء النجاح <code>cameraSuccess</code>، وفق إحدى التنسيقات التالية، اعتمادًا على الخيار <code>cameraOptions</code> المحدد: | |||
* سلسلة نصية <code>String</code> | * سلسلة نصية <code>String</code> مرمَّزة الترميز Base64 الخاص بالصورة. | ||
* سلسلة نصية <code>String</code> تمثل موضع ملف الصورة في الذاكرة المحلية (السلوك الافتراضي). | * سلسلة نصية <code>String</code> تمثل موضع ملف الصورة في الذاكرة المحلية (السلوك الافتراضي). | ||
يمكنك أن تفعل ما تريد بالصورة المرمّزة أو | يمكنك أن تفعل ما تريد بالصورة المرمّزة أو عنواها مثل: | ||
* عرض (Render) الصورة في الوسم <code><img></code>، كما هو موضح في المثال | * عرض (Render) الصورة في الوسم <code>[[HTML/img|<img>]]</code>، كما هو موضح في المثال أدناه، أو | ||
* | * حفظها محليًّا ([[Cordova/storage#.D8.A7.D9.84.D9.88.D8.A7.D8.AC.D9.87.D8.A9 LocalStorage|LocalStorage]] أو [http://brianleroux.github.com/lawnchair/ Lawnchair] ...إلخ)، أو | ||
* | * نشرها إلى خادم بعيد. | ||
'''ملاحظة''': دقة الصور على الأجهزة الحديثة | '''ملاحظة''': دقة الصور على الأجهزة الحديثة أصبحت ممتازة. لا تُصغّر جودة الصور المختارة من معرض الجهاز، حتى عند تحديد المعامل <code>quality</code>. لتجنب مشاكل الذاكرة الشائعة، اضبط الخاصية <code>Camera.destinationType</code> إلى القيمة <code>FILE_URI</code> بدلًا من <code>DATA_URL</code>. | ||
===== المنصات المدعومة ===== | ===== المنصات المدعومة ===== | ||
*أندرويد | *أندرويد | ||
*Browser | *Browser | ||
*iOS | *iOS | ||
*ويندوز | *ويندوز | ||
* | *OSX | ||
يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله. | يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله. | ||
النوع: هو تابع ثابت (static method) للكائن <code>camera</code>. | |||
===== المعاملات ===== | ===== المعاملات ===== | ||
سطر 99: | سطر 88: | ||
|<code>successCallback</code> | |<code>successCallback</code> | ||
|<code>onSuccess</code> | |<code>onSuccess</code> | ||
| | |رد نداء نجاح العملية. | ||
|- | |- | ||
|<code>errorCallback</code> | |<code>errorCallback</code> | ||
|<code>onError</code> | |<code>onError</code> | ||
| | |رد نداء فشل العملية. | ||
|- | |- | ||
|<code>options</code> | |<code>options</code> | ||
سطر 109: | سطر 98: | ||
|خيارات الكاميرا | |خيارات الكاميرا | ||
|} | |} | ||
إليك المثال التالي:<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>. | ||
===== المنصات المدعومة ===== | ===== المنصات المدعومة ===== | ||
*iOS | *iOS | ||
'''النوع''': | '''النوع''': هو ثابت للكائن <code>camera</code>. | ||
===== مثال ===== | ===== مثال ===== | ||
<syntaxhighlight lang="javascript">navigator.camera.cleanup(onSuccess, onFail); | مثال على استعمال التابع <code>cleanup</code>:<syntaxhighlight lang="javascript">navigator.camera.cleanup(onSuccess, onFail); | ||
function onSuccess() { | function onSuccess() { | ||
console.log("Camera cleanup success.") | console.log("Camera cleanup success.") | ||
سطر 192: | سطر 118: | ||
====<code>camera.onError</code>==== | ====<code>camera.onError</code>==== | ||
دالة | دالة رد نداء (callback function) تُستخدم لتوفير رسالة خطأ. | ||
'''النوع:''' اسم نوع (typedef) ثابت للكائن <code>camera</code>. | '''النوع:''' اسم نوع (typedef) ثابت للكائن <code>camera</code>. | ||
سطر 208: | سطر 134: | ||
==== <code>camera.onSuccess</code> ==== | ==== <code>camera.onSuccess</code> ==== | ||
دالة | دالة رد نداء تُوفّر بيانات الصورة. | ||
'''النوع''': | '''النوع''': هو ثابت للكائن <code>camera</code> | ||
===== المعاملات ===== | ===== المعاملات ===== | ||
سطر 220: | سطر 146: | ||
|<code>imageData</code> | |<code>imageData</code> | ||
|سلسلة نصية | |سلسلة نصية | ||
| | |سلسلة نصية مرمَّزة وفق الترميز Base64 لمحتوى الصورة، أو عنوان (URI) لملف الصورة، وهذا يتحدد اعتمادًا على الخيار <code>cameraOptions</code> الحالي. | ||
|} | |} | ||
===== مثال ===== | ===== مثال ===== | ||
<syntaxhighlight lang="javascript">// إظهار الصورة | مثال على استعمال التابع <code>onSuccess</code> لإظهار صورة:<syntaxhighlight lang="javascript">// إظهار الصورة | ||
// | // | ||
function cameraCallback(imageData) { | function cameraCallback(imageData) { | ||
سطر 234: | سطر 160: | ||
كائن يضم معاملات اختيارية لتخصيص إعدادات الكاميرا. | كائن يضم معاملات اختيارية لتخصيص إعدادات الكاميرا. | ||
'''النوع:''' | '''النوع:''' ثابت للكائن <code>camera</code>. | ||
===== الخاصيات ===== | ===== الخاصيات ===== | ||
سطر 246: | سطر 172: | ||
|عدد | |عدد | ||
|<code>50</code> | |<code>50</code> | ||
|جودة الصورة المحفوظة، | |جودة الصورة المحفوظة، ويعبَّر عنها بعدد من المجال 0-100، حيث يمثل العدد 100 الدقة الكاملة، دون أي خسارة نتيجة ضغط الملفات. (لاحظ أن المعلومات حول دقة الكاميرا غير متوفرة.) | ||
|- | |- | ||
|<code>destinationType</code> | |<code>destinationType</code> | ||
سطر 271: | سطر 197: | ||
|عدد | |عدد | ||
| | | | ||
|العرض بالبكسل | |العرض بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع <code>targetHeight</code>. نسبة أبعاد الصورة (Aspect ratio) تبقى ثابتة. | ||
|- | |- | ||
|<code>targetHeight</code> | |<code>targetHeight</code> | ||
|عدد | |عدد | ||
| | | | ||
|الارتفاع بالبكسل | |الارتفاع بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع <code>targetWidth</code>. نسبة أبعاد الصور تبقى ثابتة. | ||
|- | |- | ||
|<code>mediaType</code> | |<code>mediaType</code> | ||
سطر 301: | سطر 227: | ||
|<code>Direction</code> | |<code>Direction</code> | ||
|BACK | |BACK | ||
|اختيار الكاميرا المراد استخدامها ( | |اختيار الكاميرا المراد استخدامها (الأمامية أو الخلفية). | ||
|} | |} | ||
==== <code>Camera.DestinationType</code> ==== | ==== <code>Camera.DestinationType</code> ==== | ||
تُعرّف الخاصية <code>DestinationType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | تُعرّف الخاصية <code>DestinationType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | ||
'''ملاحظة''': على منصة iOS، تمرير <code>DestinationType.NATIVE_URI</code> إلى جانب <code>PictureSourceType.PHOTOLIBRARY</code> أو <code>PictureSourceType.SAVEDPHOTOALBUM</code> سيُعطل أي تعديلات على الصورة (تغيير الحجم، تغيير الجودة، الاقتصاص، إلخ) بسبب اختلاف | '''ملاحظة''': على منصة iOS، تمرير <code>DestinationType.NATIVE_URI</code> إلى جانب <code>PictureSourceType.PHOTOLIBRARY</code> أو <code>PictureSourceType.SAVEDPHOTOALBUM</code> سيُعطل أي تعديلات على الصورة (تغيير الحجم، تغيير الجودة، الاقتصاص، ...إلخ) بسبب اختلاف التنفيذ (implementation) من منصة إلى أخرى. | ||
'''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code>. | ||
===== | ===== الخاصيات ===== | ||
{| class="wikitable" | {| class="wikitable" | ||
!الاسم | !الاسم | ||
سطر 357: | سطر 243: | ||
!الشرح | !الشرح | ||
|- | |- | ||
|<code> | |<code>DATA_URL</code> | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|تُعاد سلسلة نصية وفق الترميز base64. تركز <code>DATAURL</code> كثيرًا على الذاكرة، وقد تتسبب في تعطل التطبيق أو نفاذ الذاكرة. استخدم <code>FILEURI</code> أو <code>NATIVE_URI</code> إن أمكن | |تُعاد سلسلة نصية وفق الترميز base64. تركز <code>DATAURL</code> كثيرًا على الذاكرة، وقد تتسبب في تعطل التطبيق أو نفاذ الذاكرة. استخدم <code>FILEURI</code> أو <code>NATIVE_URI</code> إن أمكن. | ||
|- | |- | ||
|<code>FILE_URI</code> | |<code>FILE_URI</code> | ||
|عدد | |عدد | ||
|<code>1</code> | |<code>1</code> | ||
|إعادة عنوان | |إعادة عنوان uri الملف (<code>content://media/external/images/media/2</code> لمنصة أندرويد). | ||
|- | |- | ||
|<code> | |<code>NATIVE_URI</code> | ||
|عدد | |عدد | ||
|<code>2</code> | |<code>2</code> | ||
|إعادة العنوان | |إعادة العنوان uri الأصلي (مثل <code>asset-library://...</code> في منصة iOS). | ||
|} | |} | ||
سطر 376: | سطر 262: | ||
'''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | ||
===== | ===== الخاصيات ===== | ||
{| class="wikitable" | {| class="wikitable" | ||
!الاسم | !الاسم | ||
سطر 386: | سطر 272: | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|تعيد هذه الخاصية صورة | |تعيد هذه الخاصية صورة بصيغة JPEG. | ||
|- | |- | ||
|<code>PNG</code> | |<code>PNG</code> | ||
|عدد | |عدد | ||
|<code>1</code> | |<code>1</code> | ||
|تعيد صورة | |تعيد صورة بصيغة PNG. | ||
|} | |} | ||
==== <code>Camera.MediaType</code> ==== | ==== <code>Camera.MediaType</code> ==== | ||
'''النوع''': خاصية تعداد (enum) الثابت للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) الثابت للكائن <code>Camera</code>. | ||
===== | ===== الخاصيات ===== | ||
{| class="wikitable" | {| class="wikitable" | ||
!الاسم | !الاسم | ||
سطر 407: | سطر 293: | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|تمكن هذه الخاصية من اختيار الصور الثابتة وحسب. القيمة الافتراضية ستعيد التنسيق المحدد عبر <code>DestinationType</code> | |تمكن هذه الخاصية من اختيار الصور الثابتة وحسب. القيمة الافتراضية ستعيد التنسيق المحدد عبر <code>DestinationType</code>. | ||
|- | |- | ||
|<code>VIDEO</code> | |<code>VIDEO</code> | ||
|عدد | |عدد | ||
|<code>1</code> | |<code>1</code> | ||
|تسمح باختيار الفيديو فقط، وتعيد العنوان | |تسمح باختيار الفيديو فقط، وتعيد العنوان URL وحسب. | ||
|- | |- | ||
|<code>ALLMEDIA</code> | |<code>ALLMEDIA</code> | ||
|عدد | |عدد | ||
|<code>2</code> | |<code>2</code> | ||
|تسمح بالاختيار من جميع أنواع الوسائط | |تسمح بالاختيار من جميع أنواع الوسائط. | ||
|} | |} | ||
==== <code>Camera.PictureSourceType</code> ==== | |||
تعرف الخاصية <code>PictureSourceType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | تعرف الخاصية <code>PictureSourceType</code> تنسيق مُخرجات استدعاء التابع <code>Camera.getPicture</code>. | ||
'''ملاحظة''': على منصة iOS، تمرير <code>PictureSourceType.PHOTOLIBRARY</code> أو <code>PictureSourceType.SAVEDPHOTOALBUM</code> إلى جانب <code>DestinationType.NATIVE_URI</code> سيعطل أي تعديلات على الصورة (تغيير الحجم أو تغيير الجودة أو الافتصاص إلخ) بسبب اختلاف طرق | '''ملاحظة''': على منصة iOS، تمرير <code>PictureSourceType.PHOTOLIBRARY</code> أو <code>PictureSourceType.SAVEDPHOTOALBUM</code> إلى جانب <code>DestinationType.NATIVE_URI</code> سيعطل أي تعديلات على الصورة (تغيير الحجم أو تغيير الجودة أو الافتصاص إلخ) بسبب اختلاف طرق التنفيذ (implementation). | ||
'''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code>. | ||
===== الخاصيات ===== | ===== الخاصيات ===== | ||
سطر 437: | سطر 323: | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|اختيار صورة من مكتبة الصور في بالجهاز (تشبه SAVEDPHOTOALBUM في أندرويد) | |اختيار صورة من مكتبة الصور في بالجهاز (تشبه SAVEDPHOTOALBUM في أندرويد). | ||
|- | |- | ||
|<code>CAMERA</code> | |<code>CAMERA</code> | ||
|عدد | |عدد | ||
|<code>1</code> | |<code>1</code> | ||
|التقاط صورة عبر الكاميرا | |التقاط صورة عبر الكاميرا. | ||
|- | |- | ||
|<code>SAVEDPHOTOALBUM</code> | |<code>SAVEDPHOTOALBUM</code> | ||
|عدد | |عدد | ||
|<code>2</code> | |<code>2</code> | ||
|اختيار صورة من ألبوم Camera Roll الموجود في الجهاز (مثل PHOTOLIBRARY في منصة أندرويد) | |اختيار صورة من ألبوم Camera Roll الموجود في الجهاز (مثل PHOTOLIBRARY في منصة أندرويد). | ||
|} | |} | ||
سطر 453: | سطر 339: | ||
تطابق هذه الخاصية الثوابت <code>UIPopoverArrowDirection</code> الخاصة بمنصة iOS لتحديد موضع السهم (arrow location) على العنصر المنبثق (popover). | تطابق هذه الخاصية الثوابت <code>UIPopoverArrowDirection</code> الخاصة بمنصة iOS لتحديد موضع السهم (arrow location) على العنصر المنبثق (popover). | ||
'''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code>. | ||
===== | ===== الخاصيات ===== | ||
{| class="wikitable" | {| class="wikitable" | ||
!الاسم | !الاسم | ||
سطر 471: | سطر 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> | ||
|} | |} | ||
==== <code>Camera.Direction</code> ==== | ==== <code>Camera.Direction</code> ==== | ||
'''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code> | '''النوع''': خاصية تعداد (enum) ثابتة للكائن <code>Camera</code>. | ||
===== الخاصيات ===== | ===== الخاصيات ===== | ||
سطر 495: | سطر 381: | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|استخدام الكاميرا الخلفية | |استخدام الكاميرا الخلفية. | ||
|- | |- | ||
|<code>FRONT</code> | |<code>FRONT</code> | ||
|عدد | |عدد | ||
|<code>1</code> | |<code>1</code> | ||
|استخدام الكاميرا الأمامية | |استخدام الكاميرا الأمامية. | ||
|} | |} | ||
=== <code>CameraPopoverOptions</code> === | === <code>CameraPopoverOptions</code> === | ||
هذه معاملات مخصوصة بمنصة iOS فقط، | هذه معاملات مخصوصة بمنصة iOS فقط، إذ تحدد موضع عنصر الإرساء (anchor element) واتجاه السهم في العنصر المُنبثق (popover) عند اختيار الصور من مكتبة أو ألبوم iPad. لاحظ أنه قد يتغير حجم العنصر المنبثق حتى يتكيف مع اتجاه السهم والشاشة. تأكد من أخذ تغييرات الاتجاه بالحسبان عند تحديد موضع عنصر الإرساء. | ||
{| class="wikitable" | {| class="wikitable" | ||
!المعامل | !المعامل | ||
سطر 514: | سطر 400: | ||
|عدد | |عدد | ||
|<code>0</code> | |<code>0</code> | ||
|عدد يمثل | |عدد يمثل إحداثيات المحور x بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق. | ||
|- | |- | ||
|<code>[y]</code> | |<code>[y]</code> | ||
|عدد | |عدد | ||
|<code>32</code> | |<code>32</code> | ||
|عدد يمثل | |عدد يمثل المحور y بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق. | ||
|- | |- | ||
|<code>[width]</code> | |<code>[width]</code> | ||
سطر 534: | سطر 420: | ||
|<code>PopoverArrowDirection</code> | |<code>PopoverArrowDirection</code> | ||
|<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> أو عدم تمرير أي قيمة، ستُستخدم قيمة العرض الافتراضية لآبل) | |||
|} | |} | ||
===<code>CameraPopoverHandle</code>=== | ===<code>CameraPopoverHandle</code>=== | ||
مقبض (handle) لعارض | مقبض (handle) لعارض الصور المنبثق (image picker popover). | ||
==== المنصات المدعومة ==== | ==== المنصات المدعومة ==== | ||
سطر 549: | سطر 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> | ||
== طريقة الاستخدام == | == طريقة الاستخدام == | ||
سطر 563: | سطر 460: | ||
توضح الشيفرات البرمجية في هذا القسم مختلف المهام الممكنة، بما في ذلك: | توضح الشيفرات البرمجية في هذا القسم مختلف المهام الممكنة، بما في ذلك: | ||
* فتح الكاميرا والتقاط صورة. | * فتح الكاميرا والتقاط صورة. | ||
* التقاط صورة وإعادة صورة مصغرة - thumbnail - (صورة مُعدلة الحجم) | * التقاط صورة وإعادة صورة مصغرة - thumbnail - (صورة مُعدلة الحجم). | ||
* التقاط صورة وإنشاء كائن <code>FileEntry</code> | * التقاط صورة وإنشاء كائن <code>FileEntry</code>. | ||
* اختيار صورة من مكتبة الصور | * اختيار صورة من مكتبة الصور. | ||
* اختيار صورة بتنسيق JPEG وإعادة صورة مصغرة (صورة مُعدلة الحجم) | * اختيار صورة بتنسيق JPEG وإعادة صورة مصغرة (صورة مُعدلة الحجم). | ||
* اختيار صورة وإنشاء كائن <code>FileEntry</code> | * اختيار صورة وإنشاء كائن <code>FileEntry</code>. | ||
=== التقاط صورة === | === التقاط صورة === | ||
سطر 573: | سطر 470: | ||
قبل أن تتمكن من التقاط صورة، تحتاج أولا إلى ضبط بعض خيارات إضافة الكاميرا لأجل تمريرها إلى التابع <code>getPicture</code>. | قبل أن تتمكن من التقاط صورة، تحتاج أولا إلى ضبط بعض خيارات إضافة الكاميرا لأجل تمريرها إلى التابع <code>getPicture</code>. | ||
في هذا المثال، | في هذا المثال، سنُنشِئ الكائن الذي سنستخدمه لأجل خيارات الكاميرا، وستُعيّن الخاصية <code>sourceType</code> ديناميكيًا لدعم كل من إضافة الكاميرا ومنتقي الملفات: | ||
<syntaxhighlight lang="javascript">function setOptions(srcType) { | <syntaxhighlight lang="javascript">function setOptions(srcType) { | ||
var options = { | var options = { | ||
سطر 589: | سطر 486: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
في العادة، ستحتاج إلى استخدام <code>FILEURI</code> | في العادة، ستحتاج إلى استخدام <code>FILEURI</code> بدلًا من <code>DATAURL</code> لتجنب معظم مشاكل الذاكرة. تعد الصيغة JPEG هي الصيغة الموصى به في منصة أندرويد. | ||
يمكنك التقاط صورة من خلال تمرير كائن الخيارات إلى التابع <code>getPicture</code>، والذي سيأخذ الكائن <code>CameraOptions</code> كوسيط ثالث. عند استدعاء <code>setOptions</code>، قم بتمرير <code>Camera.PictureSourceType.CAMERA</code> كمصدر للصورة. | يمكنك التقاط صورة من خلال تمرير كائن الخيارات إلى التابع <code>getPicture</code>، والذي سيأخذ الكائن <code>CameraOptions</code> كوسيط ثالث. عند استدعاء <code>setOptions</code>، قم بتمرير <code>Camera.PictureSourceType.CAMERA</code> كمصدر للصورة. | ||
سطر 611: | سطر 508: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
لعرض الصورة على بعض المنصات، قد تحتاج إلى تضمين الجزء الرئيسي من العنوان | لعرض الصورة على بعض المنصات، قد تحتاج إلى تضمين الجزء الرئيسي من العنوان URI في العنصر <code>Content-Security-Policy</code> من الوسم [[HTML/meta|<code><meta></code>]] في الملف <code>index.html</code>. على سبيل المثال، في منصة ويندوز 10، يمكنك تضمين <code>ms-appdata:</code> في الوسم <code>[[HTML/meta|<meta>]]</code>. | ||
إليك المثال التالي: | إليك المثال التالي: | ||
سطر 636: | سطر 533: | ||
=== اختيار ملف من مكتبة الصور === | === اختيار ملف من مكتبة الصور === | ||
عند اختيار ملف باستخدام منتقي الملفات، يجب عليك أيضًا تعيين الكائن <code>CameraOptions</code>. في هذا المثال، سنُعيّن الخاصية <code>sourceType</code> عند القيمة <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code>. ولفتح منتقي الملفات، استدع التابع <code>getPicture</code> تمامًا كما فعلت في المثال السابق، مع تمرير دالة النجاح (success callback) | عند اختيار ملف باستخدام منتقي الملفات، يجب عليك أيضًا تعيين الكائن <code>CameraOptions</code>. في هذا المثال، سنُعيّن الخاصية <code>sourceType</code> عند القيمة <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code>. ولفتح منتقي الملفات، استدع التابع <code>getPicture</code> تمامًا كما فعلت في المثال السابق، مع تمرير دالة رد نداء النجاح (success callback) والخطأ (error callback) مع الكائن <code>CameraOptions</code>. | ||
<syntaxhighlight lang="javascript">function openFilePicker(selection) { | <syntaxhighlight lang="javascript">function openFilePicker(selection) { | ||
var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; | var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; | ||
سطر 650: | سطر 547: | ||
=== اختيار صورة وإعادة صورة مصغرة === | === اختيار صورة وإعادة صورة مصغرة === | ||
تغيير حجم الملف المحدد بواسطة منتقي الملفات مشابه لتغيير الحجم باستخدام تطبيق الكاميرا. اضبط قيم الخيارات <code>targetHeight</code> و <code>targetWidth</code> | تغيير حجم الملف المحدد بواسطة منتقي الملفات مشابه لتغيير الحجم باستخدام تطبيق الكاميرا. اضبط قيم الخيارات <code>targetHeight</code> و <code>targetWidth</code> بالشكل التالي: | ||
<syntaxhighlight lang="javascript">function openFilePicker(selection) { | <syntaxhighlight lang="javascript">function openFilePicker(selection) { | ||
var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; | var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; | ||
سطر 668: | سطر 565: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
=== التقاط صورة والحصول على كائن FileEntry === | === التقاط صورة والحصول على كائن <code>FileEntry</code> === | ||
إن كنت تريد القيام بشيء ما مثل نسخ صورة إلى موضع آخر، أو تحميلها إلى مكان ما باستخدام الإضافة <code>FileTransfer</code>، فستحتاج إلى الحصول على | إن كنت تريد القيام بشيء ما مثل نسخ صورة إلى موضع آخر، أو تحميلها إلى مكان ما باستخدام الإضافة <code>FileTransfer</code>، فستحتاج إلى الحصول على الكائن <code>FileEntry</code> للصورة المعادة. للقيام بذلك، استدع التابع <code>window.resolveLocalFileSystemURL</code> على عنوان URI الملف المُعاد من قبل تطبيق الكاميرا. إن كنت بحاجة إلى استخدام كائن <code>FileEntry</code>، اضبط الخيار <code>destinationType</code> إلى القيمة <code>Camera.DestinationType.FILE_URI</code> في الكائن <code>CameraOptions</code> (هذه هي القيمة الافتراضية). | ||
'''ملاحظة:''' تحتاج إلى [https://www.npmjs.com/package/cordova-plugin-file إضافة الملفات] لأجل استدعاء <code>window.resolveLocalFileSystemURL</code>. | '''ملاحظة:''' تحتاج إلى [https://www.npmjs.com/package/cordova-plugin-file إضافة الملفات] لأجل استدعاء <code>window.resolveLocalFileSystemURL</code>. | ||
في المثال التالي سنستدعي <code>window.resolveLocalFileSystemURL</code>. وسنُمرّر عنوان الصورة إلى هذه الدالة عبر دالة النجاح (success callback) الخاصة بالتابع <code>getPicture</code>. | في المثال التالي سنستدعي <code>window.resolveLocalFileSystemURL</code>. وسنُمرّر عنوان الصورة إلى هذه الدالة عبر دالة رد نداء النجاح (success callback) الخاصة بالتابع <code>getPicture</code>. يستلم معالج عملية النجاح للتابع <code>resolveLocalFileSystemURL</code> الكائنَ <code>FileEntry</code>. | ||
<syntaxhighlight lang="javascript">function getFileEntry(imgUri) { | <syntaxhighlight lang="javascript">function getFileEntry(imgUri) { | ||
window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) { | window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) { | ||
سطر 692: | سطر 589: | ||
يمكنك الاطلاع على مثال يوضح الكتابة في الكائن <code>FileEntry</code> من [https://www.npmjs.com/package/cordova-plugin-file هنا]. | يمكنك الاطلاع على مثال يوضح الكتابة في الكائن <code>FileEntry</code> من [https://www.npmjs.com/package/cordova-plugin-file هنا]. | ||
تنشئ الشيفرة | تنشئ الشيفرة التالية ملفًا في ذاكرة التخزين المؤقت لتطبيقك (في التخزين المحمي sandboxed) باسم <code>tempFile.jpeg</code>. باستخدام الكائن <code>FileEntry</code> الجديد، يمكنك نسخ الصورة إلى الملف، أو القيام بشيء آخر مثل تحميلها. | ||
<syntaxhighlight lang="javascript">function createNewFileEntry(imgUri) { | <syntaxhighlight lang="javascript">function createNewFileEntry(imgUri) { | ||
window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success(dirEntry) { | window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success(dirEntry) { | ||
سطر 705: | سطر 602: | ||
}</syntaxhighlight> | }</syntaxhighlight> | ||
== انظر | == انظر أيضًا == | ||
* | * إضافة [[Cordova/cordova plugin device|حالة الجهاز]] | ||
* إضافة [[Cordova/cordova plugin file|الوصول إلى الملفات]] | |||
* [[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]] | * [[Cordova/plugins|دليل تطوير الإضافات في كوردوفا]] | ||
==مصادر== | ==مصادر== | ||
*[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html صفحة cordova-plugin-camera في توثيق كوردوفا الرسمي.] | *[https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html صفحة cordova-plugin-camera في توثيق كوردوفا الرسمي.] |
المراجعة الحالية بتاريخ 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);
}