Question

我在Ionic Framework中构建了一个应用，我在Android中遇到了预览图片的问题。它只是没有表现出来。我使用插件Cordova相机拍摄并从手机中选择照片。在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 =“data：image / jpeg; base64，”+ imageData.replace（/（\ r \ n | \ n | \ r）/ gm，''）;

Answer 2

我遇到了你上面描述的同样问题（在我的情况下，由于我在index.html中的meta标签，我不得不添加img-src'self'数据：;）当我从离子升级时问题开始了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

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

2 个答案: