Question

125

Decoding a canvas todataURL

rated 0 times [ 126] [ 1] / answers: 1 / hits: 15759 / 13 Years ago, sat, september 3, 2011, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyonnaelled

Add To Favorites

Follow

Total Points: 35

Total Questions: 113

Total Answers: 99

Location: South Korea

Member since Fri, Sep 11, 2020

4 Years ago

answered 13 Years ago haleeg · Accepted Answer

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);

?>