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

时间:2015-11-05 10:16:43

标签: android cordova ionic

我尝试了各种解决方案:$ cordovaCapture,$ cordovaCamera(DATA_URL可以显示图片,但我希望file_URI也这样做)。

这是我的代码段:

echo $apiResult->id;
echo $apiResult->name_1;

etc

我甚至尝试将模块中的确定性列入白名单,如下所示:

$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) {
    });

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

1 个答案:

答案 0 :(得分:0)

而不是使用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}}">