Question

这是一个经常被问到的问题，但到目前为止我尝试过的解决方案都没有。

我正在我的IOS设备上运行我的Ionic应用程序，相机插件的编码返回未定义的值，并在选项变量之前停止，如下所示：

Controller.js

         $scope.picture = function($cordovaCamera, data)
         {
             $scope.Issue1 = data + "1"; // Returns Undefined1
           document.addEventListener("deviceready", function () {
               $scope.Issue2 = data + "2";// Returns Undefined2 
     var options = {
           quality: 50,
           destinationType: Camera.DestinationType.DATA_URL,
           sourceType: Camera.PictureSourceType.CAMERA,
           allowEdit: true,
           encodingType: Camera.EncodingType.JPEG,
           targetWidth: 100,
           targetHeight: 100,
           popoverOptions: CameraPopoverOptions,
           saveToPhotoAlbum: false,
           correctOrientation:true
           };
            $scope.Issue = data3 + "3"; //returns nothing
             $cordovaCamera.getPicture(options).then(function(imageData) {
                 $scope.Issue4 = data + "4"; //returns nothing               
var image = document.getElementById('myImage');
               image.src = "data:image/jpeg;base64," + imageData;
             }, function(err) {
                 $scope.Issue5 = err + data + "5"; //returns nothing             }); 

           }, false);
          }

html页面

<div class="padding"><p>1: {{Issue1}}</p></div>
<div class="padding"><p>2: {{Issue2}}</p></div>
<div class="padding"><p>3: {{Issue3}}</p></div>
<div class="padding"><p>4: {{Issue4}}</p></div>
<div class="padding"><p>5: {{Issue5}}</p></div>
<div class="padding">
     <button type="button" class="button button-block button-positive" ng-disabled="commentForm.$invalid" 
     ng-click="picture(); ">
     Camera
     </button>
   </div>

有关解决这个问题的任何想法吗？

Answer 1

此article指出了来自科尔多瓦一侧的大多数问题，同样遵循此article是使用相机插件的一个很好的例子。

Answer 2

您不应该在函数内注册deviceready eventlistener。只需在设备准备就绪后立即执行cordova插件功能时，您只需执行此操作。由于通过单击按钮调用了picture()函数，因此在调用函数之前需要确保设备已准备就绪，但每次单击按钮时都不应创建新的事件侦听器。所以事件监听器在函数之外：

document.addEventListener("deviceready", function () {
  var options = {
       quality: 50,
       destinationType: Camera.DestinationType.DATA_URL,
       sourceType: Camera.PictureSourceType.CAMERA,
       allowEdit: true,
       encodingType: Camera.EncodingType.JPEG,
       targetWidth: 100,
       targetHeight: 100,
       popoverOptions: CameraPopoverOptions,
       saveToPhotoAlbum: false,
       correctOrientation:true
       };

  $scope.picture = function() { 
    $cordovaCamera.getPicture(options).then(function(imageData) {              
      var image = document.getElementById('myImage');
      image.src = "data:image/jpeg;base64," + imageData;
    }, function(err) {
      $scope.Issue5 = err + data + "5";
    });
  } 

}, false);

适用于IOS的Ionic Camera插件

2 个答案: