我正在将 Canvas 转换为 dataURL(base64) 类型,我想使用 PhoneGap 的编写器将它保存到手机文件系统,但没有成功(我得到了无法打开的损坏文件)——这是我的一些代码:
var dataURL = document.getElementById("gen").toDataURL('image/png'); //substr() .replace('datadata:image/png;base64,', '');
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
function gotFS(fileSystem) {
fileSystem.root.getFile("screenshot.png", {create: true, exclusive: false}, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
console.log("open and write");
writer.seek(0);
writer.write(dataURL);
console.log("close and save");
}
function fail(error) {
console.log(error.code);
}
var fileTransfer = new FileTransfer();
fileTransfer.download("/", screenshot.png,
function(entry) {
alert("download complete");
},
function(error) {
alert("download error source " + error.source);
alert("download error target " + error.target);
alert("upload error code" + error.code);
}
);
我也尝试过来自 stackoverflow 的其他解决方案,它基于附加的 java 插件,但它对我不起作用。是否有纯 JS(带有额外的 js 库)解决方案?
请您参考如下方法:
FileWriter 的 write 方法不接受 base64 字符串。 根据文档 ( http://docs.phonegap.com/en/edge/cordova_file_file.md.html#FileWriter ) 文本在写入之前将被编码为 UTF-8。所以你的 base64 字符串在写入文件之前被编码,所以它不是有效的图像数据。 您必须将图像数据作为 Blob 或 ArrayBuffer 传递。请注意,这仅适用于 iOS 和 Android。 在这个答案中查看 Jeremy Banks 的 b64toBlob 函数:https://stackoverflow.com/a/16245768
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
您可以将生成的 blob 传递给 write 方法。