Question

我的视图中有以下代码：

    <div class="ponkey-add-top">
        <button class="button add-picture" ng-click="popover.show($event)"><i class="fa fa-plus"></i>Add picture</button><br />
        <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" class="take_picture">
        <label class="item item-input">
            <textarea class="ponkey-add-note-textarea" ng-model="data.text" placeholder="Your note..."></textarea>
        </label>
    </div>

从我的图库中选择图片或拍照后，预览不会显示。这适用于iOS而不是Android。现在它无法在这两种设备上运行。

控制器有这个：

        $cordovaCamera.getPicture(options).then(function (imageData) {
            $scope.imgURI = "data:image/jpeg;base64," + imageData;
            $scope.image = imageData;
            $scope.popover.hide();
        });

提交时，图像数据被发送到服务器，因此图片存在。

我忽略了什么吗？

Answer 1

cordova-imagePicker

适用于多种图像选择 - 适用于iOS和Android 4.0 以及。

安装只需运行此命令

cordova plugin add cordova-plugin-image-picker

示例 - 获取全尺寸图像（所有默认选项）：

  module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {

  var options = {
   maximumImagesCount: 10,
   width: 800,
   height: 800,
   quality: 80
  };

  $cordovaImagePicker.getPictures(options)
    .then(function (results) {
      for (var i = 0; i < results.length; i++) {
        console.log('Image URI: ' + results[i]);
      }
    }, function(error) {
      // error getting photos
    });
});

Answer 2

我终于想出了我必须做的事情。问题中发布的功能和视图是正确的。

但是在index.html中，我必须使用Content-Security-Policy更多地指定img-src 'self' data:，并将以下代码添加到apps.js：

   .config(function ($compileProvider) {
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image\//);
    })

在离子视图中从画廊中拍摄或选择照片后无图像预览

2 个答案: