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

Question

I get the base64-encoded image form the canvas as:

var dataURL = canvas.toDataURL( "image/png" );

Then I turn it into data like this:

//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder
var data = atob( dataURL.substring( "data:image/png;base64,".length ) );

Then I write it to the filesystem via:

event.createWriter(
    function(writerEvent)
    {
        //The success handler
        writerEvent.onwriteend = function(finishEvent)
        {
            ...
        };

        //Error handler
        writerEvent.onerror = settings.error;

        // Create a new Blob
        var blob = new Blob( [ data ], { type: "image/png" } );

        //Write it into the path
        writerEvent.write( blob );
    }
}

I try to set it as src of an image like this:

document.getElementById( "saved" ).src = event.toURL();

That writes the file and I am able to find it and get a url (by reading it and using the event: event.toURL(). But the image shows as a broken image icon on the web page. What am I doing wrong?

Lovelady

What's that event object? Can you show the code you're using to read the file? – Camorra

Answer 1

data is a string, so when you pass it to blob, the binary data will be that string in UTF-8 encoding. You want binary 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/

Crucifer

Thank you! That was exactly the problem. I didn't know it needed to be converted to an array of 8-bit unsigned int. – Lovelady

Absolutely brilliant! I too missed the array conversion in my attempts. – Kultur

Instead of dataURL.substring( "data:image/png;base64,".length ) (which is 22), I would suggest to use dataURL.replace(/^.*?base64,/, '') then your code is still stable even if you happen do switch to image/jpeg. – Galsworthy

You should get a medal. – Crumble

Note that canvas.toBlob has 94% coverage now. – Paddy

Also note that if you just want to download the file to your filesystem, it's by far easier to build an <a href="that data url" download="filenameyouwant"> and clicking that, all on the JS side. Presto, it's a normal download. – Cramfull