Question

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?

Answer 1

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

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