الفرق بين المراجعتين لصفحة: «Cordova/cordova plugin camera»

من موسوعة حسوب
لا ملخص تعديل
تحديث
 
(6 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الإضافة cordova-plugin-camera في كوردوفا}}</noinclude>
<noinclude>{{DISPLAYTITLE:إضافة الكاميرا في كوردوفا}}</noinclude>
[[تصنيف: Cordova]]
[[تصنيف: Cordova]]
[[تصنيف: plugin]]
[[تصنيف: Cordova Plugin]]
[[تصنيف: cordova_plugin_camera]]
تُعرّف إضافة الكاميرا (cordova-plugin-camera) كائنًا عامًّا هو <code>navigator.camera</code> يوفر واجهة برمجية لالتقاط الصور، واختيار الصور من مكتبة الصور داخل النظام.  
تُعرّف الإضافة <code>cordova-plugin-camera</code> كائنًا عامًّا <code>navigator.camera</code>، والذي يوفر واجهة برمجية لالتقاط الصور، واختيار الصور من مكتبة الصور داخل النظام.  


على الرغم من أن الكائن <code>navigator.camera</code> مربوط بالنطاق العام (global scope) للكائن <code>navigator</code>، إلا أنه غير متوفر إلا بعد إطلاق الحدث <code>deviceready</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 أو ما بعده:  
يتطلب تثبيت هذه الإضافة الإصدار 5.0 من كوردوفا أو ما بعده:  
<syntaxhighlight lang="console">cordova plugin add cordova-plugin-camera‎</syntaxhighlight>  
<syntaxhighlight lang="shell">cordova plugin add cordova-plugin-camera‎</syntaxhighlight>  


لا يزال بالإمكان تثبيت هذه الإضافة على الإصدارات القديمة من كوردوفا عبر المُعرِّف المُتجاوز:  
لا يزال بالإمكان تثبيت هذه الإضافة على الإصدارات القديمة من كوردوفا عبر المُعرِّف المهمل:  
<syntaxhighlight lang="console">cordova plugin add org.apache.cordova.camera‎</syntaxhighlight>  
<syntaxhighlight lang="shell">cordova plugin add org.apache.cordova.camera‎</syntaxhighlight>  


من الممكن أيضًا تثبيت هذه الإضافة عبر عنوان مستودع git مباشرة (إلا أنه غير مستقر)  
من الممكن أيضًا تثبيت هذه الإضافة عبر مستودع git مباشرةً (إلا أنه غير مستقر):
<syntaxhighlight lang="console">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>
 
== هذا التوثيق مولد آليًا ==
 
'''تنبيه''': قم بتنفيذ الأمر <code>npm install</code> في مستودع الإضافة لتمكين التوليد التلقائي للتوثيق إن كنت تخطط لإرسال وثائق العلاقات العامة (PR).
 
تُستخدم الأداة [https://www.npmjs.com/package/jsdoc-to-markdown jsdoc-to-markdown] لتوليد المستندات.
 
بتـالف التوثيق من قالب، وملفات الواجهة البرمجية المُستخلصة من شيفرة [[JavaScript|جافاسكريبت]] الخاصة بالإضافة، يجب إعادة إنشاء التوثيق قبل كل عملية التزام - commit - (يتم إجراؤها تلقائيًا عبر الأداة [https://github.com/typicode/husky husky]، عبر تنفيذ الأمر <code>npm run gen-docs</code> مع [[Cordova/hooks|الخطاف]] <code>precommit</code> - راجع الملف <code>package.json</code> لمزيد من التفاصيل).
=== ملاحظات خاصة بمنصة iOS ===  
=== ملاحظات خاصة بمنصة iOS ===  


منذ الإصدار iOS 10، صار من الإلزامي تقديم وصف للاستخدام (usage description) في الملف <code>info.plist</code> إن كنت تريد الوصول إلى بيانات حساسة. عندما يستأذن النظام المستخدم للوصول إلى تلك المعلومات، سيُعرض وصف الاستخدام ذاك كجزء من مربع الاستئذان (permission dialog box)، ولكن إذا لم تُوفِّر وصف الاستخدام، فسيتعطل التطبيق قبل عرض مربع الحوار. وأيضًا، سترفض Apple التطبيقات التي تصل إلى البيانات الخاصة دون أن تقدم وصفًا للاستخدام.  
منذ الإصدار iOS 10، صار من الإلزامي تقديم وصف للاستخدام (usage description) في الملف <code>info.plist</code> إن كنت تريد الوصول إلى البيانات الحساسة. عندما يستأذن النظام المستخدم للوصول إلى تلك المعلومات، سيُعرض وصف الاستخدام ذاك كجزء من مربع الاستئذان (permission dialog box)، ولكن إذا لم تُوفِِّر وصف الاستخدام، فسيتعطل التطبيق قبل عرض مربع الحوار. كما سترفض Apple التطبيقات التي تصل إلى البيانات الخاصة دون أن تقدم وصفًا للاستخدام.  


تتطلب هذه الإضافات أوصاف الاستخدام التالية:  
تتطلب هذه الإضافات أوصاف الاستخدام التالية:  
* <code>NSCameraUsageDescription</code>: يحدد سبب وصول تطبيقك إلى كاميرا الجهاز.  
* <code>NSCameraUsageDescription</code>: يحدد سبب وصول تطبيقك إلى كاميرا الجهاز.  
* <code>NSPhotoLibraryUsageDescription</code>: يحدد سبب وصول تطبيقك إلى مكتبة صور المستخدم.  
* <code>NSPhotoLibraryUsageDescription</code>: يحدد سبب وصول تطبيقك إلى مكتبة صور المستخدم.  
* <code>NSLocationWhenInUseUsageDescription</code>: يحدد سبب وصول تطبيقك إلى المعلومات الجغرافية التي تحدد موقع المستخدم أثناء استخدام التطبيق. (عيِّن هذا الوصف إن تم تعيين الخيار<code>CameraUsesGeolocation</code> عند القيمة <code>true</code>).  
* <code>NSLocationWhenInUseUsageDescription</code>: يحدد سبب وصول تطبيقك إلى المعلومات الجغرافية التي تحدد موقع المستخدم أثناء استخدام التطبيق. (عيِّن هذا الوصف إن تم تعيين الخيار <code>CameraUsesGeolocation</code> إلى القيمة <code>true</code>).  
* <code>NSPhotoLibraryAddUsageDescription</code>: يحدد سبب طلب تطبيقك حق الوصول بالكتابة فقط (write-only access) إلى مكتبة صور المستخدم.  
* <code>NSPhotoLibraryAddUsageDescription</code>: يحدد سبب طلب تطبيقك إذن الوصول بالكتابة فقط (write-only access) إلى مكتبة صور المستخدم.  


لإضافة هذه المُدخلات إلى الملف <code>info.plist</code>، يمكنك استخدام الوسم <code>edit-config</code> في الملف <code>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> على النحو التالي:  
<syntaxhighlight lang="xml"><edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<syntaxhighlight lang="xml"><edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
     <string>need camera access to take pictures</string>
     <string>need camera access to take pictures</string>
سطر 55: سطر 46:
== الواجهة البرمجية (API) ==
== الواجهة البرمجية (API) ==


=== <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> من التقاط صورة باستخدام الكاميرا، أو الحصول على صورة من معرض الصور في الجهاز.   
يُمكّن التابع <code>getPicture</code> من التقاط صورة باستخدام الكاميرا، أو الحصول على صورة من معرض الصور في الجهاز.   


تُمرّر الصورة إلى دالة النجاح (success callback) كسلسلة نصية  مُرمّز بالترميز Base64، أو على هيئة عنوانٍ (URI) يشير إلى ملف الصورة.  
تُمرّر الصورة إلى دالة رد نداء النجاح (success callback) كسلسلة نصية  مُرمّزة بالترميز Base64، أو على هيئة عنوانٍ (URI) يشير إلى ملف الصورة.  


يفتح التابع <code>camera.getPicture</code> تطبيق الكاميرا الافتراضي للجهاز، والذي يسمح للمستخدمين بالتقاط الصور بشكل افتراضي - يحدث هذا السلوك، عندما تتساوى الخاصيتان <code>Camera.sourceType</code> و <code>Camera.PictureSourceType.CAMERA</code>. بمجرد أن يلتقط المستخدم الصورة، يُغلق تطبيق الكاميرا ويُسترجع (restored) التطبيق.  
يفتح التابع <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>cameraSuccess</code>، وفق إحدى التنسيقات التالية، اعتمادًا على الخيار <code>cameraOptions</code> المحدد:  
* سلسلة نصية <code>String</code> تحتوي على الترميز-Base64 الخاص بالصورة.  
* سلسلة نصية <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]، الخ)
* حفظها محليًّا ([[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>.  
'''ملاحظة''': دقة الصور على الأجهزة الحديثة أصبحت ممتازة. لا تُصغّر جودة الصور المختارة من معرض الجهاز، حتى عند تحديد المعامل <code>quality</code>. لتجنب مشاكل الذاكرة الشائعة، اضبط الخاصية  <code>Camera.destinationType</code> إلى القيمة <code>FILE_URI</code> بدلًا من <code>DATA_URL</code>.  


===== المنصات المدعومة =====
===== المنصات المدعومة =====
*أندرويد  
*أندرويد  
*بلاك بيري
*Browser  
*Browser  
*فايرفوكس
* FireOS
*iOS  
*iOS  
*ويندوز  
*ويندوز  
* WP8
*OSX
* أوبونتو


يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله.  
يمكن الحصول على المزيد من الأمثلة والملاحظات المخصوصة بمنصات محددة أسفله.  


'''النوع''': <code>getPicture</code> هو تابع ثابت (static method) للكائن <code>camera</code>.  
النوع: هو تابع ثابت (static method) للكائن <code>camera</code>.  


===== المعاملات =====
===== المعاملات =====
سطر 100: سطر 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>
سطر 110: سطر 98:
|خيارات الكاميرا
|خيارات الكاميرا
|}
|}
مثال<syntaxhighlight lang="javascript">navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);‎</syntaxhighlight>
إليك المثال التالي:<syntaxhighlight lang="javascript">navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions);‎</syntaxhighlight>
===== خيارات (iOS) =====
* <code>CameraUsesGeolocation</code> (قيمة منطقية، القيمة الافتراضية تساوي <code>false</code>). لالتقاط صور JPEG، اضبط هذا الخيار عند القيمة <code>true</code> للحصول على بيانات الموقع الجغرافي في رأس الملف EXIF. سيؤدي هذا إلى إرسال طلبية للحصول على أذونات تحديد الموقع الجغرافي إذا تم إعطاؤها القيمة <code>true</code>.
<syntaxhighlight lang="xml"><preference name="CameraUsesGeolocation" value="false" />‎</syntaxhighlight>
===== ملاحظات خاصة بمنصة Amazon Fire =====
 
تستخدم منصة Amazon Fire مقاصدًا (intents) لبدء [[Cordova/Activity|نشاط]] الكاميرا على الجهاز لالتقاط الصور، وعلى الهواتف ذات الذاكرة المنخفضة، قد يفشل هذا [[Cordova/Activity|النشاط]]. وفي تلك الحالة، قد لا تظهر الصورة عند استئناف [[Cordova/Activity|النشاط]].
=====ملاحظات خاصة بمنصة أندرويد =====
 
يستخدم أندرويد المقاصد (intents) لإطلاق [[Cordova/Activity|نشاط]] الكاميرا على الجهاز لالتقاط الصور، وعلى الهواتف ذات الذاكرة المنخفضة، قد يفشل [[Cordova/Activity|النشاط]]. وفي تلك الحالة، سيتم تسليم النتيجة المعادة من استدعاء الإضافة عبر الحدث <code>[[Cordova/events#resume|resume]]</code>. راجع صفحة [http://cordova.apache.org/docs/en/dev/guide/platforms/android/lifecycle.html دليل دورة الحياة في أندرويد] لمزيد من المعلومات. ستحتوي <code>pendingResult.result</code> على القيمة التي ستُمرّر إلى الاستجابات - callbacks - (إما عنوان URL أو رسالة خطأ). تحقق من قيمة <code>pendingResult.pluginStatus</code> لتحديد ما إذا كان الاستدعاء ناجحًا أم لا.
===== ملاحظات خاصة بالمتصفحات (Browsers) =====
 
لا  تعيد إلا الصورالمشفرة وفق الترميز Base64 فقط.
===== ملاحظات خاصة بمنصة Firefox =====
 
يتم حاليًا تقديم إضافة الكاميرا باستخدام [https://hacks.mozilla.org/2013/01/introducing-web-activities/ نشاطات الويب].
===== ملاحظات خاصة بمنصة iOS =====
 
يمكن أن يتسبب تضمين دالة [[JavaScript|جافااسكريبت]] <code>alert()‎</code> في أيٍّ من دوال الاستجابة (callback functions) إلى حدوث مشاكل. غلّف (Wrap) التنبيه داخل الدالة <code>setTimeout()‎</code> للسماح لمنتقي الصور (image picker) أو العنصر المنبثق popover في منصة iOS بالإغلاق الكامل قبل عرض التنبيه:
<syntaxhighlight lang="javascript">setTimeout(function() {
    // افعل ما تريد هنا
}, 0);‎</syntaxhighlight>
===== ملاحظات خاصة بمنصة Windows Phone 7 =====
 
استدعاء تطبيق الكاميرا الأصلي أثناء وصل الجهاز عبر Zune لن ينجح، وسيطلق دالة خطأ (error callback).
===== ملاحظات خاصة بمنصة ويندوز =====
 
على منصة Windows Phone 8.1، استخدام <code>SAVEDPHOTOALBUM</code> أو <code>PHOTOLIBRARY</code> كنوع مصدري (source type) سيؤدي إلى تجميد التطبيق إلى حين إعادة منتقي الملفات (file picker) للصورة المختارة، ثم يستأنف بصفحة البداية كما هو موضح في ملف التطبيق <code>config.xml</code>. في حالة استدعاء <code>camera.getPicture</code> من صفحة أخرى، سيؤدي ذلك إلى إعادة تحميل صفحة البداية ثانية، ولن تُستدعى دالتا النجاح والخطأ.
 
لتجنب هذا، نقترح استخدام نمط التطبيقات أحادية الصفحة (SPA)، أو استدعاء التابع <code>camera.getPicture</code> لأجل صفحة بدء التطبيق فقط.
 
لمزيد من المعلومات حول الواجهات البرمجية للمنتقي (picker) في Windows Phone 8.1 راجع هذه الصفحة: [https://msdn.microsoft.com/en-us/library/windows/apps/dn720490.aspx كيف يمكن أن يستمر تطبيقك على ويندوز بعد استدعاء منتقي الملفات]
 
===== ملاحظات خاصة بمنصة Tizen =====
لا تدعم Tizen إلا الخاصية <code>destinationType</code> الخاصة بـ <code>Camera.DestinationType.FILE_URI</code> أو الخاصية <code>sourceType</code> الخاصة بـ <code>Camera.PictureSourceType.PHOTOLIBRARY</code>.
===== أمثلة =====
المثال التالي سيلتقط صورة ويستعيد موضع ملف الصورة:
<syntaxhighlight lang="javascript">navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
}
function onFail(message) {
    alert('Failed because: ' + message);
}‎</syntaxhighlight>
 
المثال التالي سيلتقط صورة ويستردها وفق الترميز Base64:
<syntaxhighlight lang="javascript">/**
* DATA_URL تنبيه: لا يُنصح باستخدام
* يستهلك الذاكرة، حتى مع إعدادات الجودة الضعيفة، استخدامه DATA_URL
* FILE_URI قد يؤدي إلى إطلاق أخطاء الذاكرة وإلى تعطل التطبيق، استخدم
* بدلا منه NATIVE_URI  أو
*/
navigator.camera.getPicture(onSuccess, onFail, { quality: 25,
    destinationType: Camera.DestinationType.DATA_URL
});
function onSuccess(imageData) {
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
    alert('Failed because: ' + message);
}‎</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>
'''النوع''': هو ثابت للكائن <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.")
سطر 193: سطر 118:
====<code>camera.onError</code>====  
====<code>camera.onError</code>====  


دالة استجابة (Callback function) تُستخدم لتوفير رسالة خطأ.  
دالة رد نداء (callback function) تُستخدم لتوفير رسالة خطأ.  


'''النوع:''' اسم نوع (typedef) ثابت للكائن <code>camera</code>.  
'''النوع:''' اسم نوع (typedef) ثابت للكائن <code>camera</code>.  
سطر 209: سطر 134:


==== <code>camera.onSuccess</code> ====
==== <code>camera.onSuccess</code> ====
دالة استجابة تُوفّر بيانات الصورة.  
دالة رد نداء تُوفّر بيانات الصورة.  


'''النوع''': اسم نوع (typedef) ثابت للكائن <code>camera</code>   
'''النوع''': هو ثابت للكائن <code>camera</code>   


===== المعاملات =====
===== المعاملات =====
سطر 221: سطر 146:
|<code>imageData</code>  
|<code>imageData</code>  
|سلسلة نصية
|سلسلة نصية
|ترميز لبيانات الصورة وفق الترميز Base64، أو عنوان (URI) لملف الصورة، اعتمادًا على الخيار <code>cameraOptions</code> الساري.
|سلسلة نصية مرمَّزة وفق الترميز Base64 لمحتوى الصورة، أو عنوان (URI) لملف الصورة، وهذا يتحدد اعتمادًا على الخيار <code>cameraOptions</code> الحالي.
|}
|}


===== مثال =====
===== مثال =====
<syntaxhighlight lang="javascript">// إظهار الصورة
مثال على استعمال التابع <code>onSuccess</code> لإظهار صورة:<syntaxhighlight lang="javascript">// إظهار الصورة
//
//
function cameraCallback(imageData) {
function cameraCallback(imageData) {
سطر 235: سطر 160:
كائن يضم معاملات اختيارية لتخصيص إعدادات الكاميرا.  
كائن يضم معاملات اختيارية لتخصيص إعدادات الكاميرا.  


'''النوع:''' اسم نوع (typedef) ثابت للكائن <code>camera.</code>
'''النوع:''' ثابت للكائن <code>camera</code>.


===== الخاصيات =====
===== الخاصيات =====
سطر 247: سطر 172:
|عدد
|عدد
|<code>50</code>
|<code>50</code>
|جودة الصورة المحفوظة، مُعبّر عنها بعدد من المجال 0-100، حيث يمثل العدد 100 الدقة الكاملة، دون أي خسارة من ضغط الملفات. (لاحظ أن المعلومات حول دقة الكاميرا غير متوفرة.)  
|جودة الصورة المحفوظة، ويعبَّر عنها بعدد من المجال 0-100، حيث يمثل العدد 100 الدقة الكاملة، دون أي خسارة نتيجة ضغط الملفات. (لاحظ أن المعلومات حول دقة الكاميرا غير متوفرة.)  
|-
|-
|<code>destinationType</code>
|<code>destinationType</code>
|<code>DestinationType</code>
|<code>DestinationType</code>
|<code>FILE_URI</code>
|<code>FILE_URI</code>
|اختر تنسيق القيمة المعادة.  
|اختيار تنسيق القيمة المعادة.  
|-
|-
|<code>sourceType</code>
|<code>sourceType</code>
سطر 272: سطر 197:
|عدد
|عدد
|
|
|العرض بالبكسل لتكبير الصورة. يجب استخدامه مع <code>targetHeight</code>. نسبة أبعاد الصورة (Aspect ratio) تبقى ثابتة.
|العرض بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع <code>targetHeight</code>. نسبة أبعاد الصورة (Aspect ratio) تبقى ثابتة.
|-
|-
|<code>targetHeight</code>
|<code>targetHeight</code>
|عدد
|عدد
|
|
|الارتفاع بالبكسل لتكبير الصورة. يجب استخدامه مع <code>targetWidth</code>. نسبة أبعاد الصور تبقى ثابتة.  
|الارتفاع بالبكسل لتغيير مقياس الصورة. يجب استخدامه مع <code>targetWidth</code>. نسبة أبعاد الصور تبقى ثابتة.  
|-
|-
|<code>mediaType</code>
|<code>mediaType</code>
سطر 302: سطر 227:
|<code>Direction</code>
|<code>Direction</code>
|BACK
|BACK
|اختيار الكاميرا المراد استخدامها (االأمامية أو الخلفية).
|اختيار الكاميرا المراد استخدامها (الأمامية أو الخلفية).
|}
|}
=====ملاحظات خاصة بمنصة Amazon Fire=====
*
* تتجاهل هذه المنصة المعامل <code>allowEdit</code>.
* تعرض كل من <code>Camera.PictureSourceType.PHOTOLIBRARY</code> و <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code> نفس ألبوم الصور.
=====ملاحظات خاصة بمنصة أندرويد =====
* أي قيمةٍ للخاصية <code>cameraDirection</code> ستُنتج صورًا خلفية (back-facing photos).
* '''لا يمكن التنبؤ بسلوك allowEdit على منصة أندرويد:''' في أندرويد، تحاول هذه الإضافة العثور على تطبيق واستخدامه على جهاز المستخدم لأجل اقتصاص (cropping) الصورة. لا تتحكم الإضافة في التطبيق الذي يحدده المستخدم لإجراء عملية اقتصاص الصور، ومن المحتمل جدًا أن يختار المستخدم خيارًا غير متوافقٍ معها، وهذا قد يتسبب في فشل الإضافة. لا تحدث أية مشاكل في كثير من الأحيان لأن معظم الأجهزة مُزوّدة بتطبيقٍ يعالج الاقتصاص بطريقة متوافقة مع هذه الإضافة (صور Google Plus)، ولكن لا يمكن الاعتماد على هذا دائمًا. إن كان تعديل الصور أمرًا ضروريًا لتطبيقك، فكّر في البحث عن مكتبة أو إضافة خارجية توفر أداة أكثر كفاءة في تعديل للصور.
* تعرض كل من <code>Camera.PictureSourceType.PHOTOLIBRARY</code> و <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code> نفس ألبوم الصور.
* تتجاهل منصة أندرويد المعامل <code>encodingType</code> إن لم تكن الصورة معدلة (أي إن كانت قيمة <code>quality</code> تساوي 100، وكانت قيمة <code>correctOrientation</code> تساوي <code>false</code>، ولم تُحدد الخاصيتان <code>targetHeight</code> و <code>targetWidth</code>). سيُعيد مصدر الإضافة <code>CAMERA</code> دائمًا ملف JPEG المعطى من قبل الكاميرا الأصليةـ وسيُعيد مصدرًا <code>PHOTOLIBRARY</code> و <code>SAVEDPHOTOALBUM</code> الملف المحدد وفق ترميزه الحالي.
===== ملاحظات خاصة بمنصة BlackBerry 10 =====
* تتجاهل هذه المنصة المعامل <code>quality</code>.
* تتجاهل المعامل <code>allowEdit</code>.
* <code>Camera.MediaType</code> غير مدعوم.
* تتجاهل المعامل <code>correctOrientation</code>.
* تتجاهل المعامل <code>cameraDirection</code>.
===== ملاحظات خاصة بمنصة Firefox =====
* تتجاهل هذه المنصة المعامل <code>quality</code>.
* تتجاهل <code>Camera.DestinationType</code> وتساوي <code>1</code> (عنوان [URI] ملف الصورة)
* تتجاهل المعامل <code>allowEdit</code>.
* تتجاهل المعامل <code>PictureSourceType</code> (يختاره المستخدم عبر نافذة الحوار)
* تتجاهل <code>encodingType</code>
* تتجاهل <code>targetWidth</code> و <code>targetHeight</code>
* <code>Camera.MediaType</code> غير مدعوم.
* تتجاهل المعامل <code>correctOrientation</code>.
* تتجاهل المعامل <code>cameraDirection</code>.
===== ملاحظات خاصة بمنصة iOS =====
* عند استخدام <code>destinationType.FILE_URI</code>، تُحفظ الصور في المجلد المؤقت للتطبيق. تُحذف محتويات مجلد التطبيق المؤقت عند انتهاء التطبيق.
* عند استخدام <code>destinationType.NATIVE_URI</code> و <code>sourceType.CAMERA</code>، تُحفظ الصور في ألبوم الصور المحفوظة، بغض النظر عن قيمة المعامل <code>saveToPhotoAlbum</code>.
* عند استخدام <code>destinationType.NATIVE_URI</code> و <code>sourceType.PHOTOLIBRARY</code> أو <code>sourceType.SAVEDPHOTOALBUM</code>، يتم تجاهل جميع خيارات التعديل، ويعاد رابطٌ يُشير إلى الصورة الأصلية.
===== ملاحظات خاصة بمنصة Tizen =====
* الخيارات غير مدعومة
* يُعاد دائمًا عنوان ملف (FILE URI)
===== ملاحظات خاصة بمنصتي Windows Phone الإصدارين 7 و 8 =====
* تتجاهل هاتان المنصتان المعامل <code>allowEdit</code>.
* تتجاهل المنصتان المعامل <code>correctOrientation</code>.
* تتجاهل المنصتان المعامل <code>cameraDirection</code>.
* تتجاهل المنصتان المعامل <code>saveToPhotoAlbum</code>. ملاحظة هامة: دائمًا تُنسخ الصور التي تم التقاطها باستخدام الواجهة البرمجية لإضافة الكاميرا على ويندوز 8 (WP8/8) في ذاكرة ألبوم (roll) الكاميرا الخاصة بالهاتف. استنادًا إلى إعدادات المستخدم، قد يعني هذا أيضًا أن الصورة ستُحمّل تلقائيًا إلى الخدمة OneDrive. يمكن أن يعني هذا أن الصورة ستكون متاحة لجمهور أكبر من الجمهور الذي يستهدفه تطبيقك. إن كان هذا أمرًا غير مرغوب، فستحتاج إلى تقديم <code>CameraCaptureTask</code> كما هو مبيّن في توثيق [http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394006.aspx MSDN]. يمكنك أن تقوم أيضًا بالتعليق أو التصويت لصالح حل المشكلة في [https://issues.apache.org/jira/browse/CB-2083 متعقب المشكلات].
* تتجاهل المنصتان الخاصية <code>mediaType</code> في <code>cameraOptions</code>، لأن بيئة العمل SDK في منصة ويندوز لا توفر طريقة لاختيار مقاطع الفيديو من <code>PHOTOLIBRARY</code>.
==== <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> سيُعطل أي تعديلات على الصورة (تغيير الحجم، تغيير الجودة، الاقتصاص، إلخ) بسبب اختلاف التقديم (implementation) من منصة إلى أخرى.  
'''ملاحظة''': على منصة 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>quality</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> لمنصة أندرويد)  
|إعادة عنوان uri الملف (<code>content://media/external/images/media/2</code> لمنصة أندرويد).
|-
|-
|<code>sourceType</code>
|<code>NATIVE_URI</code>
|عدد
|عدد
|<code>2</code>
|<code>2</code>
|إعادة العنوان (uri) الأصلي (على سبيل المثال، <code>asset-library://...</code>‎ لمنصة iOS)
|إعادة العنوان 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  
|تعيد هذه الخاصية صورة بصيغة JPEG.
|-
|-
|<code>PNG</code>
|<code>PNG</code>
|عدد
|عدد
|<code>1</code>
|<code>1</code>
|تعيد صورة مشفرة وفق الترميز PNG
|تعيد صورة بصيغة 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) وحسب.  
|تسمح باختيار الفيديو فقط، وتعيد العنوان URL وحسب.  
|-
|-
|<code>ALLMEDIA</code>
|<code>ALLMEDIA</code>
|عدد
|عدد
|<code>2</code>
|<code>2</code>
|تسمح بالاختيار من جميع أنواع الوسائط
|تسمح بالاختيار من جميع أنواع الوسائط.
|}
|}
<code>Camera.PictureSourceType</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> سيعطل أي تعديلات على الصورة (تغيير الحجم أو تغيير الجودة أو الافتصاص إلخ) بسبب اختلاف طرق التقديم (implementation).  
'''ملاحظة''': على منصة 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>3</code>
|<code>4</code>
|-
|-
|<code>ARROW_RIGHT</code>
|<code>ARROW_RIGHT</code>
|عدد
|عدد
|<code>4</code>
|<code>8</code>
|-
|-
|<code>ARROW_ANY</code>
|<code>ARROW_ANY</code>
|عدد
|عدد
|<code>5</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 فقط، حيث تحدد موضع عنصر الإرساء (anchor element) واتجاه السهم في العنصر المُنبثق (popover) عند اختيار الصور من مكتبة أو ألبوم iPad. لاحظ أنه قد يتغير حجم العنصر المنبثق حتى يتكيف مع اتجاه السهم والشاشة. تأكد من أخذ تغييرات الاتجاه بعين الاعتبار عند تحديد موضع عنصر الإرساء.   
هذه معاملات مخصوصة بمنصة iOS فقط، إذ تحدد موضع عنصر الإرساء (anchor element) واتجاه السهم في العنصر المُنبثق (popover) عند اختيار الصور من مكتبة أو ألبوم iPad. لاحظ أنه قد يتغير حجم العنصر المنبثق حتى يتكيف مع اتجاه السهم والشاشة. تأكد من أخذ تغييرات الاتجاه بالحسبان عند تحديد موضع عنصر الإرساء.   
{| class="wikitable"
{| class="wikitable"
!المعامل
!المعامل
سطر 514: سطر 400:
|عدد
|عدد
|<code>0</code>
|<code>0</code>
|عدد يمثل إحداثية الأفاصيل (x) بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق.  
|عدد يمثل إحداثيات المحور x بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق.  
|-
|-
|<code>[y]</code>
|<code>[y]</code>
|عدد
|عدد
|<code>32</code>
|<code>32</code>
|عدد يمث إحداثية الأراتيب (y) بالبكسل من عنصر الشاشة الذي يُرسى عليه العنصر المنبثق.  
|عدد يمثل المحور 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) لعارض صور منبثق (image picker popover).  
مقبض (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>
}</syntaxhighlight>
== عينة: التقاط الصور، اختيار الصور من مكتبة الصور، والحصول على الصور المصغرة ==
== طريقة الاستخدام ==
 
تتيح لك إضافة الكاميرا القيام بعدة أمور مهمة من قبيل فتح كاميرا الجهاز والتقاط صورة، أو فتح منتقي الملفات واختيار ملف معيّن. 
 
توضح الشيفرات البرمجية في هذا القسم مختلف المهام الممكنة، بما في ذلك:  
* فتح الكاميرا والتقاط صورة.
* التقاط صورة وإعادة صورة مصغرة - thumbnail - (صورة مُعدلة الحجم).
* التقاط صورة وإنشاء كائن <code>FileEntry</code>. 
* اختيار صورة من مكتبة الصور.
* اختيار صورة بتنسيق JPEG وإعادة صورة مصغرة (صورة مُعدلة الحجم).
* اختيار صورة  وإنشاء كائن <code>FileEntry</code>. 


تتيح لك الإضافة Camera إجراء أشياء مثل فتح كاميرا الجهاز والتقاط صورة، أو فتح منتقي الملفات واختيار ملف معيّن. توضح الشيفرات البرمجية في هذا القسم مختلف المهام الممكنة، بما في ذلك:
=== التقاط صورة ===
* فتح الكاميرا والتقاط صورة [#takePicture take a Picture]
* التقاط صورة وإعادة صورة مصغرة [#getThumbnails return thumbnails] (صورة مُعدلة الحجم)
* التقاط صورة و [#convert generate a FileEntry object]
* [#selectFile Select a file] اختيار صورة من مكتبة الصور
* اختيار صورة بتنسيق JPEG وإعادة صورة مصغرة [#getFileThumbnails return thumbnails] (صورة مُعدلة الحجم)
* اختيار صورة و [#convert generate a FileEntry object]


== التقاط صورة ==
قبل أن تتمكن من التقاط صورة، تحتاج أولا إلى ضبط بعض خيارات إضافة الكاميرا لأجل تمريرها إلى التابع <code>getPicture</code>. 


قبل أن تتمكن من التقاط صورة، تحتاج أولا إلى ضبط بعض خيارات إضافة الكاميرا لكي تُمرّر إلى دالة الإضافة <code>getPicture</code> . هذه مجموعة من التوصيات المهمة. في هذا المثال، ستُنشئ الكائن الذي ستستخدمه لأجل خيارات الكاميرا، وستُعيّن <code>sourceType</code> ديناميكيًا لدعم كل من إضافة الكاميرا ومنتقي الملفات.
في هذا المثال، سنُنشِئ الكائن الذي سنستخدمه لأجل خيارات الكاميرا، وستُعيّن الخاصية <code>sourceType</code> ديناميكيًا لدعم كل من إضافة الكاميرا ومنتقي الملفات:
<syntaxhighlight lang="javascript">function setOptions(srcType) {
<syntaxhighlight lang="javascript">function setOptions(srcType) {
     var options = {
     var options = {
         // Some common settings are 20, 50, and 100
         // من الخيارات الشائعة: 20 - 50 - 100
         quality: 50,
         quality: 50,
         destinationType: Camera.DestinationType.FILE_URI,
         destinationType: Camera.DestinationType.FILE_URI,
         // In this app, dynamically set the picture source, Camera or photo gallery
         // في هذا التطبيق، التعيين الديناميكي لمصدر الصورة أو الكاميرا أو ألبوم الصور
         sourceType: srcType,
         sourceType: srcType,
         encodingType: Camera.EncodingType.JPEG,
         encodingType: Camera.EncodingType.JPEG,
         mediaType: Camera.MediaType.PICTURE,
         mediaType: Camera.MediaType.PICTURE,
         allowEdit: true,
         allowEdit: true,
         correctOrientation: true  //Corrects Android orientation quirks
         correctOrientation: true  //تصحيح خصوصيات الاتجاه في أندرويد
     }
     }
     return options;
     return options;
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


في العادة، ستحتاج إلى استخدام FILEURI بدلاً من DATAURL لتجنب معظم مشاكل الذاكرة. JPEG هو الترميز الموصى به في منصة أندرويد.  
في العادة، ستحتاج إلى استخدام <code>FILEURI</code> بدلًا من <code>DATAURL</code> لتجنب معظم مشاكل الذاكرة. تعد الصيغة JPEG هي الصيغة الموصى به في منصة أندرويد.  


يمكنك التقاط صورة من خلال تمرير كائن الخيارات إلى <code>getPicture</code>، والذي يأخذ الكائن CameraOptions كوسيط ثالث. عند استدعاء <code>setOptions</code>، قم بتمرير <code>Camera.PictureSourceType.CAMERA</code> كمصدر للصورة.  
يمكنك التقاط صورة من خلال تمرير كائن الخيارات إلى التابع <code>getPicture</code>، والذي سيأخذ الكائن <code>CameraOptions</code> كوسيط ثالث. عند استدعاء <code>setOptions</code>، قم بتمرير <code>Camera.PictureSourceType.CAMERA</code> كمصدر للصورة.  
<syntaxhighlight lang="javascript">function openCamera(selection) {
<syntaxhighlight lang="javascript">function openCamera(selection) {
     var srcType = Camera.PictureSourceType.CAMERA;
     var srcType = Camera.PictureSourceType.CAMERA;
سطر 594: سطر 495:
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
         displayImage(imageUri);
         displayImage(imageUri);
         // You may choose to copy the picture, save it somewhere, or upload.
         // يمكنك نسخ الصورة أو تخزينها أو تحميلها
         func(imageUri);
         func(imageUri);
     }, function cameraError(error) {
     }, function cameraError(error) {
سطر 601: سطر 502:
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


بمجرد التقاط الصورة، يمكنك إما عرضها، أو فعل شيء آخر بها. في هذا المثال، سنستدعي الدالة <code>displayImage</code> الخاصة بالتطبيق من الشيفرة السابقة.  
بمجرد التقاط الصورة، يمكنك إما عرضها، أو فعل شيء آخر بها. في هذا المثال، سنستدعي الدالة <code>displayImage</code> من الشيفرة السابقة.  
<syntaxhighlight lang="javascript">function displayImage(imgUri) {
<syntaxhighlight lang="javascript">function displayImage(imgUri) {
     var elem = document.getElementById('imageFile');
     var elem = document.getElementById('imageFile');
سطر 607: سطر 508:
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


لعرض الصورة على بعض المنصات، قد تحتاج إلى تضمين الجزء الرئيسي من العنوان (URI) في العنصر Content-Security-Policy من الوسم <code><meta></code> في الملف index.html. على سبيل المثال، في منصة ويندوز 10، يمكنك تضمين <code>ms-appdata:</code> في الوسم <code><meta></code>. إليك المثال التالي:
لعرض الصورة على بعض المنصات، قد تحتاج إلى تضمين الجزء الرئيسي من العنوان 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>.  
<syntaxhighlight lang="javascript"><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 *">‎</syntaxhighlight>


== التقاط صورة وإعادة صورة مصغرة ==  
إليك المثال التالي:
<syntaxhighlight lang="xml"><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 *">‎</syntaxhighlight>


للحصول على صور أصغر، يمكنك إعادة صورة مُعدّلة الحجم عن طريق تمرير القيمتين <code>targetHeight</code> و <code>targetWidth</code> مع الكائن CameraOptions الخاص بك. في هذا المثال، ستغيّر حجم الصورة المعادة لتلائم مربعًا بحجم 100 بكسل × 100 بكسل (يتم الاحتفاظ بنسبة العرض إلى الارتفاع [aspect ratio]، لذلك فالعدد 100 بكسل سيساوي إما الارتفاع أو العرض، مهما كان الأكبر في المصدر).  
=== التقاط صورة وإعادة صورة مصغرة ===
 
للحصول على صور أصغر، يمكنك إعادة صورة مُعدّلة الحجم عن طريق تمرير القيمتين <code>targetHeight</code> و <code>targetWidth</code> مع كائن الخيارات <code>CameraOptions</code>. في هذا المثال، سنغيّر حجم الصورة المعادة لتلائم مربعًا بحجم 100 بكسل × 100 بكسل (يتم الحفاظ على نسبة الأبعاد [aspect ratio]، لذلك فالعدد 100 بكسل سيساوي إما الارتفاع أو العرض، مهما كان الأكبر في المصدر).  
<syntaxhighlight lang="javascript">function openCamera(selection) {
<syntaxhighlight lang="javascript">function openCamera(selection) {
     var srcType = Camera.PictureSourceType.CAMERA;
     var srcType = Camera.PictureSourceType.CAMERA;
سطر 622: سطر 525:
     }
     }
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
         // Do something
         // افعل شيئا ما
     }, function cameraError(error) {
     }, function cameraError(error) {
         console.debug("Unable to obtain picture: " + error, "app");
         console.debug("Unable to obtain picture: " + error, "app");
سطر 628: سطر 531:
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


== اختيار ملف من مكتبة الصور ==  
=== اختيار ملف من مكتبة الصور ===  


عند اختيار ملف باستخدام منتقي الملفات، فيجب عليك أيضًا تعيين الكائن CameraOptions. في هذا المثال، سنُعيّن <code>sourceType</code> عند القيمة <code>Camera.PictureSourceType.SAVEDPHOTOALBUM</code>. لفتح منتقي الملفات، استدع <code>getPicture</code> تمامًا كما فعلت في المثال السابق، مع تمرير دوال الاستجابة (callbacks) للنجاح والخطأ إلى جانب الكائن CameraOptions.  
عند اختيار ملف باستخدام منتقي الملفات، يجب عليك أيضًا تعيين الكائن <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;
سطر 636: سطر 539:
     var func = createNewFileEntry;
     var func = createNewFileEntry;
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
         // Do something
         // افعل شيئا ما
     }, function cameraError(error) {
     }, function cameraError(error) {
         console.debug("Unable to obtain picture: " + error, "app");
         console.debug("Unable to obtain picture: " + error, "app");
سطر 642: سطر 545:
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


== اختيار صورة وإعادة صورة مصغرة ==  
=== اختيار صورة وإعادة صورة مصغرة ===  


تغيير حجم الملف المحدد بواسطة منتقي الملفات مشابه لتغيير الحجم باستخدام تطبيق الكاميرا. اضبط خيارات <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;
سطر 650: سطر 553:
     var func = createNewFileEntry;
     var func = createNewFileEntry;
     if (selection == "picker-thmb") {
     if (selection == "picker-thmb") {
         // To downscale a selected image,
         // لتصغير الصورة المختارة
         // Camera.EncodingType (e.g., JPEG) must match the selected image type.
         // ينبغي أن تطابق نوع الصورة المختارة (JPEG مثل) Camera.EncodingType 
         options.targetHeight = 100;
         options.targetHeight = 100;
         options.targetWidth = 100;
         options.targetWidth = 100;
     }
     }
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
     navigator.camera.getPicture(function cameraSuccess(imageUri) {
         // Do something with image
         // افعل شيئا ما بالصورة
     }, function cameraError(error) {
     }, function cameraError(error) {
         console.debug("Unable to obtain picture: " + error, "app");
         console.debug("Unable to obtain picture: " + error, "app");
سطر 662: سطر 565:
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


== التقاط صورة والحصول على كائن FileEntry ==  
=== التقاط صورة والحصول على كائن <code>FileEntry</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> (هذه هي القيمة الافتراضية). 


إن كنت تريد القيام بشيء ما مثل نسخ صورة إلى موضع آخر، أو تحميلها إلى مكان ما باستخدام الإضافة FileTransfer، فستحتاج إلى الحصول على كائن FileEntry لأجل الصورة المعادة. للقيام بذلك، استدع التابع <code>window.resolveLocalFileSystemURL</code> على عنوان (URI) الملف المُعاد من قبل تطبيق الكاميرا. إن كنت بحاجة إلى استخدام كائن FileEntry، اضبط <code>destinationType</code> عند القيمة <code>Camera.DestinationType.FILE_URI</code> في كائن CameraOptions (هذه هي أيضًا القيمة الافتراضية).
'''ملاحظة:''' تحتاج إلى [https://www.npmjs.com/package/cordova-plugin-file إضافة الملفات] لأجل استدعاء <code>window.resolveLocalFileSystemURL</code>.  
ملاحظة تحتاج إلى [https://www.npmjs.com/package/cordova-plugin-file File plugin] لاستدعاء <code>window.resolveLocalFileSystemURL</code>.  


هنا استدعاء <code>window.resolveLocalFileSystemURL</code>. يُمرّر عنوان الصورة إلى هذه الدالة من دالة النجاح الخاصة بـ <code>getPicture</code>. تتلقى دالة الاستجابة للنجاح (success handler) الخاصة بـ <code>resolveLocalFileSystemURL</code> الكائن FileEntry.  
في المثال التالي سنستدعي <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) {
         // Do something with the FileEntry object, like write to it, upload it, etc.
         // مثل الكتابة فيه أو تحميله FileEntry افعل شيئا ما بالكائن
         // writeFile(fileEntry, imgUri);
         // writeFile(fileEntry, imgUri);
         console.log("got file: " + fileEntry.fullPath);
         console.log("got file: " + fileEntry.fullPath);
         // displayFileData(fileEntry.nativeURL, "Native URL");
         // displayFileData(fileEntry.nativeURL, "Native URL");
     }, function () {
     }, function () {  
       // If don't get the FileEntry (which may happen when testing
       // (وهو ما يمكن أن يحدث على بعض المحاكيات) FileEntry إن لم تحصل على كائن
       // on some emulators), copy to a new FileEntry.
       // جديد FileEntry قم بالنسخ في كائن
         createNewFileEntry(imgUri);
         createNewFileEntry(imgUri);
     });
     });
}‎</syntaxhighlight>  
}‎</syntaxhighlight>  


في المثال الموضح في الشيفرة البرمجية السابقة، يمكنك استدعاء دالة التطبيق <code>createNewFileEntry</code> إن لم تحصل على كائن FileEntry صالح. الصورة المعادة من قبل تطبيق الكاميرا يجب أن تُنتج كائن FileEntry صالح، ولكن قد يختلف سلوك المنصات على بعض المحاكيات للملفات المُعادة من منتقي الملفات.  
في المثال الموضح في الشيفرة السابقة، يمكنك استدعاء التابع <code>createNewFileEntry</code> في حال لم يكن الكائن <code>FileEntry</code> الذي حصلت عليه صالحًا. يجب أن تنتج الصورة المعادة من قبل تطبيق الكاميرا كائنًا <code>FileEntry</code> صالحًا، ولكن سلوك المنصات على بعض المحاكيات قد يختلف بالنسبة للملفات التي يعيدها منتقي الملفات.
يمكنك الاطلاع على مثال عن الكتابة في FileEntry من هنا [https://www.npmjs.com/package/cordova-plugin-file File plugin README].  
 
يمكنك الاطلاع على مثال يوضح الكتابة في الكائن <code>FileEntry</code> من [https://www.npmjs.com/package/cordova-plugin-file هنا].  


تنشئ الشيفرة المعروضة هنا ملفًا في ذاكرة التخزين المؤقت لتطبيقك (في التخزين المحمي sandboxed) باسم <code>tempFile.jpeg</code>. باستخدام كائن FileEntry الجديد، يمكنك نسخ الصورة إلى الملف، أو القيام بشيء آخر مثل تحميلها.  
تنشئ الشيفرة التالية ملفًا في ذاكرة التخزين المؤقت لتطبيقك (في التخزين المحمي 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) {
         // JPEG file
         // JPEG الملف
         dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false }, function (fileEntry) {
         dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false }, function (fileEntry) {
             // Do something with it, like write to it, upload it, etc.
             // افعل شيئا به، مثل الكتابة فيه أو تحميله
             // writeFile(fileEntry, imgUri);
             // writeFile(fileEntry, imgUri);
             console.log("got file: " + fileEntry.fullPath);
             console.log("got file: " + fileEntry.fullPath);
سطر 696: سطر 601:
     }, onErrorResolveUrl);
     }, onErrorResolveUrl);
}‎</syntaxhighlight>
}‎</syntaxhighlight>
== انظر أيضًا ==
* إضافة [[Cordova/cordova plugin device|حالة الجهاز]]
* إضافة [[Cordova/cordova plugin file|الوصول إلى الملفات]]
* [[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);
}

انظر أيضًا

مصادر