آموزش دوربین Cordova در برنامه نویسی آیونیک

3 سال پیش

آموزش دوربین Cordova در برنامه نویسی آیونیک

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش دوربین Cordova در برنامه نویسی آیونیک خواهیم پرداخت.

افزونه دوربین Cordova از دوربین بومی برای گرفتن عکس یا گرفتن عکس از گالری تصاویر استفاده می کند.

استفاده از دوربین

پوشه root پروژه خود را در خط فرمان باز کنید ، سپس با دستور زیر پلاگین Cordova camera را بارگیری و نصب کنید.

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

اکنون، ما یک سرویس برای استفاده از یک پلاگین دوربین ایجاد خواهیم کرد. ما از AngularJS factory استفاده خواهیم کرد و قول q$ را می دهیم که باید به کارخانه تزریق شود.

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

برای استفاده از این سرویس در برنامه، باید آن را به عنوان یک وابسته به یک کنترل کننده تزریق کنیم. Cordova camera API روش getPicture را ارائه می دهد که برای گرفتن عکس با استفاده از دوربین بومی استفاده می شود.

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

کد HTML

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

کد کنترل کننده

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) {
      var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 1
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

خروجی مطابق تصویر زیر نشان داده خواهد شد.

Ionic Cordova Camera
اگر می خواهید از تصاویر گالری خود استفاده کنید، تنها چیزی که باید تغییر دهید روش sourceType از پارامتر گزینه های شماست. با این تغییر به جای دوربین یک پنجره گفتگوی باز می شود و به شما امکان می دهد تصویر مورد نظر خود را از دستگاه انتخاب کنید.

می توانید کد زیر را مشاهده کنید ، در جایی که گزینه sourceType به ۰ تغییر کرده است. اکنون ، وقتی دکمه دوم را بزنید ، منوی پرونده را از دستگاه باز می کند.

کد کنترل کننده

.controller('MyCtrl', function($scope, Camera) {
   $scope.getPicture = function (options) {
       var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };  
})

خروجی مطابق تصویر زیر نشان داده خواهد شد.

Ionic Cordova Camera Gallery

وقتی تصویری را که گرفته اید ذخیره می کنید، روی صفحه ظاهر می شود. می توانید آن را همانطور که می خواهید سبک دهید.

Ionic Cordova Camera Image

منبع.

لیست جلسات قبل آموزش برنامه نویسی آیونیک

نویسنده مطلب erfan molaei

آموزش دوربین Cordova در برنامه نویسی آیونیک

آموزش دوربین Cordova در برنامه نویسی آیونیک

کد HTML

کد کنترل کننده

کد کنترل کننده

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

بدون دیدگاه

آموزش دوربین Cordova در برنامه نویسی آیونیک

کد HTML

کد کنترل کننده

کد کنترل کننده

لیست جلسات قبل آموزش برنامه نویسی آیونیک

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه