我正在使用图像选择器 ( cordova-imagePicker) 插件从图库中获取图像并将它们上传到服务器。
我在 Android 平台 5.1.1 和以下插件上使用 Cordova 6.1.1:
cordova-plugin-camera 2.2.0 "Camera"
cordova-plugin-compat 1.0.0 "Compat"
cordova-plugin-device 1.0.1 "Device"
cordova-plugin-file 4.2.0 "File"
cordova-plugin-imagepicker 1.1.0 "ImagePicker"
cordova-plugin-inappbrowser 1.4.0 "InAppBrowser"
cordova-plugin-media 2.3.0 "Media"
作为对插件的回调,我使用以下代码将获取的路径转换为文件。请注意,我使用 resolveFile
因为这段代码也在桌面上运行,在这种情况下,该条目已经是一个文件对象。
var resolveFile = function(entry) {
if (typeof(entry) === "string") {
var deferred = $q.defer();
// first convert to local file system URL
window.resolveLocalFileSystemURL(entry, function(fileEntry) {
// now read/convert the file to file object.
fileEntry.file(function(file) {
console.log("File converted to file entry");
deferred.resolve(file);
}, function(err) {
console.log("Failed to convert to file entry", err);
deferred.reject(err);
});
}, function(err) {
console.log("Failed to resolve to file URL", err);
deferred.reject(err);
});
return deferred.promise;
} else {
return $q.when(entry);
}
};
这又用于读取图像并将其传递给将其上传到服务器的函数($files
是我从插件或桌面输入中获取的内容/浏览器):
var upload = function () {
if (!$files[currentFile]) {
onAllFinished();
return;
}
file = $files[currentFile];
beforeLoad(file);
fileReader = new FileReader();
fileReader.onload = onload;
fileReader.onprogress = progress;
resolveFile(file).then(function(actualFile) {
fileReader.readAsDataURL(actualFile);
});
currentFile++;
};
在上面,onload 剪切图像数据(在字符串中的 'base64' 之后)并将其发送到需要 base64 字符串的上传代码,并使用简单的 AJAX 调用将数据上传到服务器:
var uploadPhoto = function(url, photo, callback, error)
$http.post(url, {
photo: photo,
})
.success(callback)
.error(function (data, status, headers, config) {
if (error)
error(data, status, headers, config);
});
最后一个功能也适用于相机插件 camera plugin使用 DATA_URI
目标(我知道,不推荐这样做),它也返回一个 base64 字符串(所以我可以重用代码)。
在我看来,文件读取器输出出现问题(我猜)。什么(我认为)暗示小图像(10s kb)加载良好以及已经从相机插件准备的 base64 字符串但是通过文件阅读器的大图像(几 MB)(在 Android 上,在桌面上它很好) 已上传损坏(见下文)。
有人遇到过这样的问题吗?谁能提出修复建议(除了更改代码以使用 FileTransfer 插件)?
原图:
上传的(损坏的)图片。请注意,其中一些可以正常读取/上传:
最佳答案
我在搜索类似问题的解决方案时发现了您的问题。当用作图像源时,来自相机的大图像的 DataURL 会显示,但当我使用 fileReader.readAsDataURL 时,同一图像已损坏。
我已经能够通过使用 fileReader.readAsBinaryData 而不是 fileReader.readAsDataURL 然后将二进制字符串转换为 dataURL 来绕过这个问题。
window.resolveLocalFileSystemURL(imageUri, function done(fileEntry) {
fileEntry.file(function (fileObj) {
var image = new Image();
var reader = new FileReader();
reader.onloadend = function (e) {
image.src = "data:image/jpeg;base64," + window.btoa(e.target.result)
}
reader.readAsBinaryString(fileObj);
}
}
希望这可以帮助您找到自己的解决方法。
关于javascript - Cordova - 读取大图像会损坏图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37392303/