آموزش Cordova، بخش 8: دوربین

آموزش Cordova، بخش 8: دوربین

از پلاگین cordova-plugin-camera برای عکس گرفتن و یا استفاده از فایل های موجود در گالری استفاده می شود.

قدم 1 : نصب پلاگین دوربین

کد زیر را در CMD  اجرا کنید تا پلاگین دوربین نصب شود.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

قدم 2 : افزودن دکمه و تصویر

در این مرحله یک دکمه ای برای فراخوانی دوربین ایجاد می کنیم و یک تگ img برای نمایش تصویر گرفته شده قرار می دهیم . این کد ها را درون فایل Index.htm و در عنصر div class="app" قرار دهید.

<button id = "cameraTakePicture">TAKE PICTURE</button>
<img id = "myImage"></img>

قدم 3 : افزودن Event Listener

event listener را درون تابع oneDevice Ready قرار می دهیم تا مطمین شویم که cordova به طور کامل بارگذاری شده است.

document.getElementById("cameraTakePicture").addEventListener
   ("click", cameraTakePicture);

قدم 4 : افزودن توابع (گرفتن عکس)

یک تابع به نام cameraTakePicture به عنوان callback در event listener ایجاد می کنیم.

در این تابع ما شیء عمومی nagative.camera که توسط این افزونه فراهم شده را فراخونی میکنیم. در صورتی که روند عکس گرفتن با موفقیت انجام شود داده ها به تابع onSuccess ارسال میشود. در غیر این صورت یک پیغام خطایی نمایش داده میشود. کد های مربوط را در انتهای فایل index.js قرار می دهیم.

function cameraTakePicture() {
   navigator.camera.getPicture(onSuccess, onFail, { 
      quality: 50,
      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);
   }
}

زمانی که اپلیکیشن را اجرا کنیم و سپس دکمه را فشار دهیم دوربین دستگاه فعال می شود.

کار با دوربین در cordova

حال زمانی که یک عکس گرفته شده و ذخیره شود در زیر دکمه نمایش داده می شود.

کار با دوربین در cordova

حال اگر به جای گرفتن عکس با دوربین قصد انتخاب فایل از گالری را داشته باشید، گام های زیر را دنبال کنید. تنها تفاوت آن با مراحل قبل پارامتر sourceType است.

گام 1

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-camera

گام 2

 <button id = "cameraGetPicture">GET PICTURE</button>

گام 3

 document.getElementById("cameraGetPicture").addEventListener("click", cameraGetPicture);

گام 4 

function cameraGetPicture() {
   navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
      destinationType: Camera.DestinationType.DATA_URL,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY
   });

   function onSuccess(imageURL) {
      var image = document.getElementById('myImage');
      image.src = imageURL;
   }

   function onFail(message) {
      alert('Failed because: ' + message);
   }

}

حال اگر اپلیکیشن را اجرا کنید و دکمه دوم را فشار دهید این بار به جای دوربین فایل سیستم باز می شود و شما می توانید تصویر دلخواه را انتخاب کنید.

فایل سیستم در cordova

پارامترهای دیگر این پلاگین

ردیف پارامتر و توضیحات
1

quality

کیفیت تصویر بین 0 تا 100. پیش فرض = 50

2

destinationType

DATA_URL یا 0 خروجی در فرمت base64  خواهد بود.

FILE_URI یا 1 URI فایل را برمی گرداند.

NATIVE_URI یا 2 URI اصلی تصویر را برمی گرداند.

3

sourceType

PHOTOLIBRARY یا 0 کتابخانه تصاویر را باز می کند.

CAMERA یا 1 دوربین را اجرا می کند.

SAVEDPHOTOALBUM یا 2 البوم های تصاویر ذخیره شده را باز می کند.

4

allowEdit

امکان ویرایش تصویر

5

encodingType

JPEG یا 0 خروجی در فرمت jpeg

PNG یا 1 خروجی در فرمت png

6

targetWidth

مقدار عرض در واحد پیکسل

7

targetHeight

مقدار ارتفاع در واحد پیکسل

8

mediaType

PICTURE یا 0 امکان تنها انتخاب تصاویر

VIDEO یا 1 امکان تنها انتخاب ویدیو

ALLMEDIA یا 2 امکان انتخاب همه نوع رسانه

9

correctOrientation

برای تصحیح جهت تصویر

10

saveToPhotoAlbum

برای ذخیره تصویر در البوم

11

popoverOptions

برای مقدار دهی مسیر popover در IOS

12

cameraDirection

FRONT یا 0 دوریبین جلو

BACK یا 1 دوربین عقب

ALLMEDIA



بومیم