Trying to save canvas PNG data url to disk with HTML5 filesystem, but when I retrieve as URL, it's invalid Trying to save canvas PNG data url to disk with HTML5 filesystem, but when I retrieve as URL, it's invalid google-chrome google-chrome

Trying to save canvas PNG data url to disk with HTML5 filesystem, but when I retrieve as URL, it's invalid


data is a string, so when you pass it to blob, the binary data will be that string in UTF-8 encoding. You wantbinary data not a string.

You can do it like:

var canvas = document.createElement("canvas");var dataURL = canvas.toDataURL( "image/png" );var data = atob( dataURL.substring( "data:image/png;base64,".length ) ),    asArray = new Uint8Array(data.length);for( var i = 0, len = data.length; i < len; ++i ) {    asArray[i] = data.charCodeAt(i);    }var blob = new Blob( [ asArray.buffer ], {type: "image/png"} );

There is also canvas.toBlob available in future but not currently in Chrome.

Demo http://jsfiddle.net/GaLRS/