Saving a HTML5 canvas as an image to the server

Question

I'm trying to save my canvas as an image to my server but it is not working.

javascript

var data = canvas.toDataURL();
var picture = document.getElementById("my-picture");

PHP

$canvas = base64_decode(str_replace('data:image/png;base64,', '' , $value['picture']));
file_put_contents('my_custom_path/my_custom_filename.png', $canvas);

this code was given to me but I am not sure how to implement the php part.

Answer 1

Assuming your Javascript/HTML is correct (make sure you are grabbing the correct POST value) try this PHP code instead:

$data = str_replace('data:image/png;base64,', '', $data);
$data = base64_decode( str_replace(' ', '+', $data) );
$success = file_put_contents('my_custom_path/my_custom_filename.png', $data);

Also make sure the directory that you are placing the file in is accessible.