Ionic - Cordova 攝像頭

Cordova 攝像頭外掛使用**原生攝像頭**拍照或從圖片庫獲取圖片。

使用攝像頭

在命令提示符中開啟專案根資料夾，然後使用以下命令下載並安裝 Cordova 攝像頭外掛。

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

現在，我們將建立一個用於使用攝像頭外掛的服務。我們將使用**AngularJS 工廠**和需要注入到工廠中的 promise 物件**$q**。

services.js 程式碼

.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 攝像頭 API 提供了**getPicture**方法，該方法用於使用原生攝像頭拍照。

可以透過將**options**引數傳遞給**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);
      });
   };
})

輸出將如下面的螢幕截圖所示。

如果要使用相簿中的圖片，只需更改**options**引數中的**sourceType**方法即可。此更改將開啟一個對話方塊彈出視窗而不是攝像頭，並允許您從裝置中選擇所需的影像。

您可以看到以下程式碼，其中**sourceType**選項已更改為**0**。現在，當您點選第二個按鈕時，它將開啟裝置的檔案選單。

控制器程式碼

.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);
      });
   };  
})

輸出將如下面的螢幕截圖所示。

儲存拍攝的影像後，它將顯示在螢幕上。您可以根據需要對其進行樣式設定。

還可以使用其他一些選項，其中一些在下面的表格中給出。