I am developing a chrome extension.
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.
First I get the dataURL from the canvas:
var dataURL = canvas.toDataURL('image/png;base64');
Then just the data:
var image64 = dataURL.replace(/data:image\/png;base64,/, '');
Then I make a Blob.
var bb = new BlobBuilder();
bb.append(image64);
var blob = bb.getBlob('image/png');
Then I request the file system with the following function onInitFs();
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);
This results in a corrupted file being written to the file system.
I don't know what else I can do to make this work.
Could someone please guide me in the right direction.
The following are some of the sources to the functions I am using to accomplish this task.
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
http://www.html5rocks.com/en/tutorials/file/filesystem/#toc-file-creatingempty
Thank You!
Best Answer
I've found a function that converts a data URL to a blob.
Great for when you need to save a canvas image to the sandboxed FileSystem. Works in Chrome 13.
Usage:
Source trail:
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