Ionic 相机

Cordova相机插件使用本 机相机 拍摄照片或从图库中获取图像。

使用相机

在命令提示符下打开项目根文件夹，然后使用以下命令下载并安装Cordova相机插件。

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

现在，我们将创建一个使用相机插件的服务。我们将使用 AngularJS工厂 并承诺需要注入工厂的对象 $ 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);
      });

   };
})

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

Ionic科尔多瓦相机

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

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

Ionic Cordova相机画廊

保存拍摄的图像后，它将显示在屏幕上。你可以按照你想要的方式设计它。

Ionic Cordova相机图像

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

参数	类型	详细
quality	Number	图像质量，范围0-100
destinationType	Number	图像格式。
sourceType	Number	用于设置图片的来源。
allowEdit	boolean	用于允许编辑图像。
encodingType	Number	值0将设置JPEG，值1将设置PNG。
targetWidth	Number	用于缩放图像宽度。
targetHeight	Number	用于缩放图像高度。
mediaType	string	sed用于设置媒体类型。
cameraDirection	Number	值0将设置后置摄像头，值1将设置前置摄像头。
popoverOptions	string	仅限IOS的选项，用于指定iPad中的弹出位置。
saveToPhotoAlbum	boolean	用于将图像保存到相册。
correctOrientation	boolean	用于校正捕获图像的方向。