当使用从cordovacapture捕获图像返回的图像路径时，正在显示破碎的图像
提问于 2015-11-05 02:16:43
我尝试过各种解决方案：$cordovaCapture、$cordovaCamera(DATA_URL可以显示图片，但我希望file_URI也这样做)。
下面是我的代码片段：
$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
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-11-02 20:33:19
而不是使用file_URI上传图像。我使用data_URL，将图像转换为blob，并使用科多瓦-文件传输插件将文件上传到服务器。这样，我可以在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}}">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33541927
复制相关文章
腾讯云开发者
