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函数来额外自定义本机相机设置。将上述代码示例复制到您的控制器以触发此Behave。它将打开相机应用程序并返回带有图像数据的成功回调函数或带有错误消息的错误回调函数。我们还需要两个按钮来调用我们将要创建的函数，并且我们需要在屏幕上显示图像。

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

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

如果您想使用图库中的图像，唯一需要更改的是选项参数中的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);
      });
   };  
})

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

当您保存拍摄的图像时，它将出现在屏幕上。您可以按照您想要的方式设计它。

还可以使用其他几个选项，下表给出了其中一些选项。