title: Save PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
body: <p>I am developing a chrome extension.</p>
  
  <p>I open an image file in canvas, I apply some changes to it, then I am trying to save it to the HTML5 filesystem api. </p>
  
  <p>First I get the dataURL from the canvas:</p>
  
  <pre><code>    var dataURL = canvas.toDataURL('image/png;base64'); 
  </code></pre>
  
  <p>Then just the data:</p>
  
  <pre><code>    var image64 = dataURL.replace(/data:image\/png;base64,/, '');
  </code></pre>
  
  <p>Then I make a Blob.</p>
  
  <pre><code>    var bb = new BlobBuilder();
      bb.append(image64);
      var blob = bb.getBlob('image/png');
  </code></pre>
  
  <p>Then I request the file system with the following function onInitFs();</p>
  
  <pre><code>    function onInitFs(fs) {
        fs.root.getFile('image.png', {create: true}, function(fileEntry) {
          // Create a FileWriter object for our FileEntry (log.txt).
          fileEntry.createWriter(function(fileWriter) {
          //WRITING THE BLOB TO FILE
          fileWriter.write(blob);
          }, errorHandler);
        }, errorHandler);
      }
  
      window.requestFileSystem(window.PERSISTENT, 5*1024*1024, onInitFs, errorHandler);
  </code></pre>
  
  <p>This results in a corrupted file being written to the file system.</p>
  
  <p>I don't know what else I can do to make this work.</p>
  
  <p>Could someone please guide me in the right direction. </p>
  
  <p>The following are some of the sources to the functions I am using to accomplish this task.</p>
  
  <p><a href="http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method" rel="noreferrer">http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method</a></p>
  
  <p><a href="http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty" rel="noreferrer">http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty</a></p>
  
  <p>Thank You!</p>