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

输出将如下面的屏幕截图所示。

保存拍摄的图像后，它将显示在屏幕上。您可以根据需要对其进行样式设置。

还可以使用其他一些选项，其中一些在下面的表格中给出。