Cordova 相机 - 无法访问库

Posted 2023-03-15

【中文标题】Cordova 相机 - 无法访问库

【英文标题】：Cordova Camera - Can't access library

【发布时间】：2015-08-26 09:26:26

【问题描述】：

我尝试在 Ionic 上下文中使用 Cordova 相机插件（在 android 上）使用相机拍照或从库中挑选图片。

我可以拍照，但似乎没有使用我的选项调整图片大小。

但是，我无法打开照片库，因为它总是打开相机。

这是我的代码：

$scope.takePicture = function()
  
     var options = 
      quality: 100,
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: false,
      targetWidth: 250,
      targetHeight: 350,
      encodingType: Camera.EncodingType.JPEG,
      popoverOptions: CameraPopoverOptions,
      correctOrientation: true,
      saveToPhotoAlbum: true
    ;

    navigator.camera.getPicture(
      function(imageURI) 
         $scope.exercise.image = imageURI;
      , 
      function(err) 
        // error
      ,
      options);
  ;

  $scope.browsePicture = function()
  
    var options = 
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: false,
      targetWidth: 250,
      targetHeight: 350,
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      popoverOptions: CameraPopoverOptions,
      correctOrientation: true
    ;

    navigator.camera.getPicture(
      function(imageURI) 
         $scope.exercise.image = imageURI;
      , 
      function(err) 
        // error
      ,
      options);
  ;

我有另一种方法可以删除我的图像。但是当我使用它时（通过一个按钮），它也会打开相机。

  $scope.deletePicture = function()
  
    $scope.exercise.image = null;
  ;

而且，如果我点击我的 html img 标签，它也会打开相机。但是，我没有在标签上附加任何方法。

我错过了什么吗？

【问题讨论】：

能否请您分享有问题的 html 端代码。

【参考方案1】：

你必须使用$cordovaCamera.getPicture(options) 来拍照或从图书馆工作。这里发布了一个对我有用的相机示例代码 在您的控制器中将相机代码编写为

         $scope.userPic = function()
            console.log("userPic function got called");
            $ionicPopup.show(
              template: '<p>Take picture or use from library</p>',
              title: 'Choose',
              buttons: [
                
                  text: '<b>Camera</b>',
                  onTap: function(e) 
                    return "camera";
                  
                ,
                
                  text: '<b>Library</b>',
                  type: 'button-positive',
                  onTap: function(e) 
                    return "library";
                  
                ,
              ]
            ).then(function(resp) 
              $scope.takePicture(resp);
              console.log('resp', resp);
            );
        

        $scope.takePicture = function(resp)
            console.log("takePicture function got called");
            console.log(resp);
            var source;
            if (resp == "camera") 
              source = Camera.PictureSourceType.CAMERA;
            else
              source = Camera.PictureSourceType.PHOTOLIBRARY;
            ;
            var options = 
              quality : 75,
              destinationType : Camera.DestinationType.FILE_URI,
              sourceType : source,
              allowEdit : true,
              encodingType: Camera.EncodingType.JPEG,
              targetWidth: 300,
              targetHeight: 300,
              popoverOptions: CameraPopoverOptions,
              saveToPhotoAlbum: false
            ;
             $cordovaCamera.getPicture(options).then(function(imageData) 
                console.log(imageData);
            , function(err) 
                console.log(err);
                // error
            );
             

在您的 HTML 中将相机按钮代码写为

    <button class="button button-bar button-balanced" ng-click="userPic()">
      Camera
    </button>

【参考方案2】：

这是我通过代码实现它的方式：

var getPicture = function(pictureType)
  
    var source;

    if (pictureType == "camera") 
      source = Camera.PictureSourceType.CAMERA;
    else
      source = Camera.PictureSourceType.PHOTOLIBRARY;
    ;

    var options = 
      quality : 75,
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : source,
      allowEdit : true,
      encodingType: Camera.EncodingType.JPEG,
      targetWidth: 300,
      targetHeight: 300,
      popoverOptions: CameraPopoverOptions,
      saveToPhotoAlbum: false
    ;

     $cordovaCamera.getPicture(options).then(function(imageData) 
        $scope.exercise.image = imageURI;
    , function(err) 
        alert(err);
        // error
    );
  ;

  $scope.takePicture = function()
  

    getPicture('camera');


     /*var options = 
      quality: 100,
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.CAMERA,
      allowEdit: false,
      targetWidth: 250,
      targetHeight: 350,
      encodingType: Camera.EncodingType.JPEG,
      popoverOptions: CameraPopoverOptions,
      correctOrientation: true,
      saveToPhotoAlbum: true
    ;

    $cordovaCamera.getPicture(options).then(function(imageURI)
      $scope.exercise.image = imageURI;
    , 
    function(err) 
        console.log(err);
        // error
    );*/

    /*navigator.camera.getPicture(
      function(imageURI) 
         $scope.exercise.image = imageURI;
      , 
      function(err) 
        // error
      ,
      options);*/
  ;

  $scope.browsePicture = function()
  
    getPicture('browse');


    /*var options = 
      destinationType: Camera.DestinationType.FILE_URI,
      sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
      allowEdit: false,
      targetWidth: 250,
      targetHeight: 350,
      encodingType: Camera.EncodingType.JPEG,
      mediaType: Camera.MediaType.PICTURE,
      popoverOptions: CameraPopoverOptions,
      correctOrientation: true
    ;

    $cordovaCamera.getPicture(options).then(function(imageURI)
      $scope.exercise.image = imageURI;
    , 
    function(err) 
        console.log(err);
        // error
    );*/

    /*navigator.camera.getPicture(
      function(imageURI) 
         $scope.exercise.image = imageURI;
      , 
      function(err) 
        // error
      ,
      options);*/
  ;

这不起作用，在这两种情况下，总是我的相机打开。

编辑：这是我的 HTML：

    <div class="row" ng-hide="exercise.image">
      <div class="col"><button class="button button-clear button-calm button-block" ng-click="takePicture()">Take Picture</button></div>
      <div class="col"><button class="button button-clear button-balanced button-block" ng-click="browsePicture()">Browse Pictures</button></div>
    </div>

【讨论】：

检查pictureType的值是什么。

pictureType 是“相机”或“浏览”。

你的代码对我来说非常适合我刚刚在我的手机上测试过，它正在单独打开相机和库

好吧，这很奇怪。你的手机和安卓版本是多少？我的是摩托罗拉 MotoG 4G 和 Android 5.1

好的，现在我改变了显示按钮的方式，库正在工作。似乎是 2 个并排的按钮导致了问题。