Recently I worked on similar stuff and by lot of searching gathered the following.
Please note that base64 encoded data with its header is used for Canvas since the browser knows to decode the data as needed. However the image file like png has its own format and is mostly binary data.
To use as png , one needs to split out the data part like below.
1.
imgData = canvas.toDataURL("image/png");
var BASE64_MARKER = ';base64,';
var base64Index = imgData.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = imgData.substring(base64Index);
Then the encoded data needs to be converted to binary.
var raw = window.atob(base64);
2. One needs to find a way to save the binary data ( called raw above) as a file.
Most of the file APIs are meant for string with varous character encoding and do not handle binary data.
I think one needs to use the bytearray and get rid of the extra hex characters like C2 and C3 which are used by UTF-8 to show multibyte. There is a customFileWrite which may be enhanced to handle the binary stuff.
It helps a lot to use a hex editor to compare a real png file content and the data one is working on.
