为什么使用 Cordova 相机时预览图像不显示在 Android 中？

Question

我正在 Ionic Framework 中构建应用程序，但我在 Android 中的预览图像出现问题。它只是没有显示。我使用插件 Cordova Camera 从您的手机中拍摄和选择照片。在 iPhone 上，我确实看到了预览图像，所以一切正常。

有人知道为什么它不能在 Android 上运行吗？

此代码在 controllers.js 中：

    $scope.addImage = function (type) {
        if (type == 'take') {
            $scope.cam = Camera.PictureSourceType.CAMERA;
        } else if (type == 'select') {
            $scope.cam = Camera.PictureSourceType.PHOTOLIBRARY;
        }

        var options = {
            quality: 75,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: $scope.cam,
            allowEdit: true,
            correctOrientation: true,
            encodingType: Camera.EncodingType.JPEG,
            targetWidth: 2000,
            targetHeight: 2000,
            popoverOptions: CameraPopoverOptions,
            saveToPhotoAlbum: false
        };

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

以及视图中的 HTML：

    <div class="edit-image" ng-click="popover.show($event)">
        <img ng-if="imgURI && imgURI === undefined" ng-src="{{imgURI }}" />
        <img ng-if="!imgURI && imgURI === undefined" src="https://example.com/noimage.jpg" />
        <img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" class="take_picture" />
    </div>

Answer 1

在 iOS 设备上，将 background-image 设置为 base64 数据可以正常工作，但在 Android 设备上，base64 编码数据似乎在末尾包含换行符。删除它们解决了我的问题。

因此，您需要在代码中添加正则表达式以消除 imageData 中的换行符。

$scope.imgURI = "数据:图像/jpeg;base64," + imageData.replace(/(\r\n|\n|\r)/gm, '');

Answer 2

我遇到了你上面描述的同样的问题（在我的情况下，这是因为我在 index.html 中的元标记，我不得不添加 img-src 'self' data:;）当我从 ionic 升级时问题开始了v1 到 v2。我升级前的元标记是

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

然后在升级后使一切正常，我不得不将其更改为

<meta http-equiv="Content-Security-Policy" content=" img-src 'self' data:; default-src *; script-src 'self'  'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *"> 

注意：标签用于开发阶段

更多信息跟随链接 'img-src' was not explicitly set, so 'default-src' is used as a fallback