Image to Canvas to Blob to ObjectURL

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. 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() {
    ctx.drawImage(img, 0, 0);
    var img2  = bdy.appendChild( new Image );
    
    var imd = cvs.toDataURL("image/png");  
    var ui8a = convertDataURIToBinary(imd);
    var bb = new WebKitBlobBuilder();
    bb.append(ui8a.buffer);

  img2.src = webkitURL.createObjectURL(bb.getBlob("image/png"));
  }

}(this, document,...