Databases
StackOverflow2013
Postsdbo
POSave PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSave PNG Canvas Image to HTML5 Storage (JAVASCRIPT)?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload