Image to Canvas to Blob to ObjectURL using filesysem

Experiment to see how to get a file into the filesystem. Copies the first image into a canvas and then turns that canvas's data into a blob and then sets the third images src to the uri for the blob using fileentry.toURL which allows to set a file name. Only ever tested on Chrome. Works, but why so many hoops?

by PAEz

JavaScript

function convertDataURIToBinary(dataURI) {
 var BASE64_MARKER = ';base64,';   
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

if (
  this.ArrayBuffer &&
  this.Uint8Array  &&
  this.Uint32Array
) (function(win, doc, bdy, DATA_URI) {
  var img  = bdy.appendChild( new Image ),
    cvs  = bdy.appendChild( doc.createElement("canvas") ),
    ctx  = cvs.getContext("2d"),
    size = cvs.width = cvs.height = "100";
  
  img.onload = main;
  img.src = DATA_URI;
  
  /**
   *  ナビ子記法？
   */
  function main() {
 
   
      function errorHandler(e) {
  var msg = '';

  switch (e.code) {
    case FileError.QUOTA_EXCEEDED_ERR:
      msg = 'QUOTA_EXCEEDED_ERR';
      break;
    case FileError.NOT_FOUND_ERR:
      msg = 'NOT_FOUND_ERR';
      break;
    case FileError.SECURITY_ERR:
      msg = 'SECURITY_ERR';
      break;
    case FileError.INVALID_MODIFICATION_ERR:
      msg = 'INVALID_MODIFICATION_ERR';
      break;
    case FileError.INVALID_STATE_ERR:
      msg = 'INVALID_STATE_ERR';
      break;
    default:
      msg = 'Unknown Error';
      break;
  };

  console.log('Error: ' + msg);
}
      
     function onInitFs(fs) {

  fs.root.getFile('tester.png', {create: true}, function(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function(fileWriter) {

      fileWriter.onwriteend = function(e) {
        console.log('Write completed.');
      };

      fileWriter.onerror = function(e) {
        console.log('Write failed: ' + e.toString());
      };

        var imd = cvs.toDataURL("image/png");  
    var ui8a = convertDataURIToBinary(imd);
      bb = new WebKitBlobBuilder();
    bb.append(ui8a.buffer);
        
    ...