我正在将 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 方法。


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!