使用 Base64 编写 HTML5 二进制文件

Question

如您所知，HTML 5 提供了一个很好的 FileAPI。我构建了一个系统，用户接收 Base64 编码的字符串，需要将其写入磁盘（具有适当的权限，因为它是 Google Chrome 应用程序）。我的代码如下：（稍微清除了不必要的东西）

function onInitFs(fs){      
  fs.root.getFile(fileName, {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(fileWriter) {
      var bb = new window.WebKitBlobBuilder(); 
      bb.append( atob(dataInBase64Format));
      fileWriter.write(bb.getBlob());           
    }, errorHandler);
    console.log( fileEntry.toURL());
  }, errorHandler);
}

但是，我的原始文件大小是：6302446字节，服务器将它们作为Base64以8403264字节发送，但是保存的文件是9242715字节。当然，我知道出了问题，我查看了文件，它只是一个很好的字符串。没有出现华丽的人物。我假设我以文本模式编写，atob 只是将其转换为另一个字符串；我需要将其转换为二进制格式（也许是数组？）并强制我的 fileWriter 以二进制模式而不是文本模式写入。我在网上搜索过，但找不到解决方案。我在 StackOverflow 上发现了这个问题 Google Chrome Base64 方法能够处理来自文件 API 的二进制数据吗？ 但这对我没有帮助。

如何将 Base64 字符串转换为正确的数据结构并让 fileWriter 写入它？

Answer 1

我编写了一个扩展，它使用 Chrome 捕获屏幕截图，将其放在画布上，调整其大小，然后使用文件系统 API 保存画布数据。不确定这是否与您的直接相似，但也许大部分代码就足够了？

在这种情况下，我假设我的 dataURI （例如 myCanvas.toDataURL("image/png")）与您的 dataInBase64Format 具有相同的 Base64 格式>。

功能：

// canvas.toBlob is not implemented in Chrome yet! So we have to build the blob ourselves.
// Derived from http://mustachified.com/master.js
// via http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-April/031243.html
// via https://bugs.webkit.org/show_bug.cgi?id=51652
// via http://code.google.com/p/chromium/issues/detail?id=67587

function dataURItoBlob(dataURI, callback) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    // write the ArrayBuffer to a blob, and you're done
    var bb = new window.WebKitBlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

用途：

// Save image data
function onInitFs(fs){
    fs.root.getFile(fileName, {create:true}, function(fileEntry) {
        fileEntry.createWriter(function(fileWriter) {
            fileWriter.write(dataURItoBlob(myCanvas.toDataURL("image/png")));
        }, fileErrorHandler);
    }, fileErrorHandler);
}, fileErrorHandler);