javascript - HTML5 Binary File Writing w Base64 - Stack Overflow

admin管理员组

文章数量:1291910

as you know HTML 5 offers a nice FileAPI. I have built a system where user recieves a Base64 encoded string, needs to be written on the disk (Has proper permissions, because it is a Google Chrome App). My code is the following: (a little cleared of unnecessary things)

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);
}

However, my original file size is: 6302446 bytes, and server sent them as Base64 in 8403264 bytes, however the saved file is 9242715 bytes. Of course I understood something is wrong and I looked the file and it is just a nice string. No fancy characters appears. I assume that I write in text mode and atob just converts it to another string; which I need to convert to binary format (in an array perhaps?) and force my fileWriter to write in binary mode, not text mode. I have searched the web, but could not find a solution. I have found this question on StackOverflow Are Google Chrome Base64 methods capable of handling binary data from the File API? but it did not help me.

How can I convert my Base64 string to proper data structure and have my fileWriter to write it?

as you know HTML 5 offers a nice FileAPI. I have built a system where user recieves a Base64 encoded string, needs to be written on the disk (Has proper permissions, because it is a Google Chrome App). My code is the following: (a little cleared of unnecessary things)

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);
}

However, my original file size is: 6302446 bytes, and server sent them as Base64 in 8403264 bytes, however the saved file is 9242715 bytes. Of course I understood something is wrong and I looked the file and it is just a nice string. No fancy characters appears. I assume that I write in text mode and atob just converts it to another string; which I need to convert to binary format (in an array perhaps?) and force my fileWriter to write in binary mode, not text mode. I have searched the web, but could not find a solution. I have found this question on StackOverflow Are Google Chrome Base64 methods capable of handling binary data from the File API? but it did not help me.

How can I convert my Base64 string to proper data structure and have my fileWriter to write it?

• javascript
• html
• google-chrome
• blob
• fileapi

Share Improve this question Follow edited May 23, 2017 at 10:26 CommunityBot 111 silver badge asked Oct 13, 2011 at 21:35 MustafaMustafa 10.4k1212 gold badges7676 silver badges122122 bronze badges 1

• I was having this problem too. I found the cause in the Blob spec: w3c.github.io/FileAPI/#blob . It attempts to rencode any DOMStrings you give it as UTF-8. This also causes invalid Unicode characters in your string to be replaced with U+FFFD replacement characters. Obviously this does very bad things to binary data you're trying to add. – thenickdude Commented Aug 1, 2015 at 8:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I wrote an extension that captures a screenshot using Chrome, puts it on a canvas, resizes it, then saves the canvas data using the Filesystem API. Not sure if this is directly similar to yours, but perhaps most of the code will suffice?

In this case, I assume my dataURI (eg myCanvas.toDataURL("image/png")) would be the same Base64 format as your dataInBase64Format.

Function:

// canvas.toBlob is not implemented in Chrome yet! So we have to build the blob ourselves.
// Derived from http://mustachified./master.js
// via http://lists.whatwg/pipermail/whatwg-whatwg/2011-April/031243.html
// via https://bugs.webkit/show_bug.cgi?id=51652
// via http://code.google./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 ponent
    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);
}

Usage:

// 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);

本文标签： javascriptHTML5 Binary File Writing w Base64Stack Overflow