将dataURL(base64)保存到PhoneGap上的文件(android)

Question

我正在将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的其他解决方案,它基于addtional java插件,但它对我不起作用.是否有纯JS(附加js libs)解决方案？

Answer 1

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方法.

Answer 2

您可能需要为足以容纳映像的文件系统请求更大的文件配额。默认值通常为 5 mb，但由于它不是标准化的，因此在不同的浏览器中可能会有所不同。

如果 data-uri 的长度超过此长度（可能考虑到它是一个 PNG 文件，其中 33% 添加了 33% 的 Base64 开销），则该文件将无法正确保存。

您可以使用配额 API 请求配额：

webkitStorageInfo.requestQuota( 
    webkitStorageInfo.PERSISTENT
    newQuotaInBytes,
    quotaCallback,
    errorCallback);

更多详情可在这找到。