使用从 cordovacapture captureimage 返回的图像路径时显示损坏的图像答案

【问题标题】：Broken image being displayed when using the image path returned from cordovacapture captureimage使用从 cordovacapture captureimage 返回的图像路径时显示损坏的图像
【发布时间】：2015-11-05 10:16:43
【问题描述】：

我尝试了各种解决方案：$cordovaCapture、$cordovaCamera（DATA_URL 可以显示图片，但我希望 file_URI 也可以这样做）。

这是我的代码 sn-p:

$scope.addImage = function() {
   var options = {limit: 1};
   $cordovaCapture.captureImage(options).then(function(imageData) {
    console.log(imageData);
     // var jsonobj=angular.toJson(imageData);
       $scope.profile.image = imageData[0];
       console.log(angular.toJson(imageData));
       console.log($scope.profile.image.localURL);//the path to upload
         document.getElementById('myImage').src = "'"+$scope.profile.image.localURL+"'";//have already tried without the quottes
     /* window.plugins.Base64.encodeFile($scope.profile.image.localURL,function(base64){  // Encode URI to Base64 needed for contacts plugin
    $scope.profile.image.preview = base64;
    console.log($scope.profile.image.preview);
});*/
      // Success! Image data is here
    }, function(err) {
    });

我什至尝试将模块中的确定性列入白名单，如下所示：

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

它也没有帮助。我正在设备和模拟器中测试该项目。我什至尝试从路径中对文件进行 base64 编码。没有任何东西可以显示最近拍摄的照片。我检索的路径是这样的： cdvfile://localhost/persistent/DCIM/Camera/123123123.jpg

【问题讨论】：

DATA_URL返回一个base64编码的字符串，你的代码不完整，你在哪里以及如何得到$scope.profile.image.localURL？
DATA_URL 用作 $cordovaCapture.getPicture 中的目标类型，它提供基本编码字符串，我可以用它显示图像，问题是 file_URI 我无法让它显示图像。使用 file_URI，我必须解析路径以获取路径，例如：cdvfile://localhost/persistent/DCIM/Camera/123123123.jpg。如果您在 html 中绑定 $scope.profile.image.localURL，例如 {{profile.image.localURL}}，您将获得路径，此外，如果您记录 angular.toJSON(imageData)，您将获得更多信息，我刚刚提取了路径。我正在使用cordovaCapture.captureImage。
但是你从哪里得到 $scope.profile.image.localURL，你的代码是错误的或不完整的
我从 $scope.profile.image.localURL 获取路径 cdvfile://localhost/persistent/DCIM/Camera/123123123.jpg，我只想显示那张图片，我尝试了 base64 编码它通过 com-badrit-base64(cordova plugin) 得到 data_URL 的结果，但没有结果，如果我能得到一个工作的 sn-p，我可以想办法，但即使经过大量搜索，我仍然可以没有找到工作的道路。无论如何，感谢您的宝贵意见:)
$cordovaCapture.getPicture 和 $cordovaCapture.captureImage 的响应不同，代码工作得很好，它给了我路径作为输出。我已经尝试使用cordovaCapture 中的file_uri 目标类型并将其路径结果解析为我直接从$cordovaCapture.capturePicture 获得的路径......我想要的只是显示来自路径而不是数据的图片...... .对不起，如果我用这个问题误导了你。

标签： android cordova ionic

【解决方案1】：

而不是使用file_URI 来上传图片。我使用data_URL，将图像转换为blob并使用cordova-file-transfer插件将文件上传到服务器。这样，我可以在html端使用base64编码的图像，同时上传。

 $scope.captureImage = function() {
            navigator.camera.getPicture(cameraSuccess, cameraError, {
                destinationType: Camera.DestinationType.DATA_URL,
                correctOrientation: true
            });
        }

        var cameraSuccess = function(imageData) {
            $scope.profileImageSource = imageData;
            $scope.changeImage = function(base64Data, contentType) {
                contentType = contentType || '';
                var sliceSize = 512;
                var byteCharacters = atob(base64Data);
                var bytesLength = byteCharacters.length;
                var slicesCount = Math.ceil(bytesLength / sliceSize);
                var byteArrays = new Array(slicesCount);

                for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
                    var begin = sliceIndex * sliceSize;
                    var end = Math.min(begin + sliceSize, bytesLength);

                    var bytes = new Array(end - begin);
                    for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
                        bytes[i] = byteCharacters[offset].charCodeAt(0);
                    }
                    byteArrays[sliceIndex] = new Uint8Array(bytes);
                }
                return new Blob(byteArrays, {
                    type: contentType
                });
            }

            $scope.picture = $scope.changeImage(imageData, 'image/png');
            $scope.$digest();
        }

HTML：

<img ng-src="data:image/gif;base64,{{profileImageSource}}">

【讨论】：