Decoding a canvas todataURL

Question

I'm having difficulty using data created with canvas's todataurl() method. Currently my code sends the resulting data to my php server which uses the file_put_contents() method to create a file to store that data. Now if I cut and paste the resulting gibberish from the file into an image tag src it works fine and displays properly so I assume so far everything is peachy.

But I keep running into issues when I try to use the code in JS. I've tried php's base64_decode method but kept getting currupt files. I found this code:

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);

and still got currupted files. Ideally I'd like to create a .png file with it but I'd settle for just processing the data file again in JS. Any help greatly appreciated.

Answer 1

It seems you have to get rid of the header that is prepended to the image data by the toDataURL() function. On the client side you can strip off the header like this:

..
var data=canvas.toDataURL();
var output=data.replace(/^data:image\/(png|jpg);base64,/, "");
// now send "output" to the server
..

On the server side use this:

<?php
    $decocedData = base64_decode($encodedData);
?>