php - Uploading canvas image data results in a blank image -

i'm using ajax query upload canvas image data, along few other variables. here's relevant code looks on client side:

front_content = document.getelementbyid("front_paint_canvas").todataurl("image/png");  ajaxhandler.open("post", "upload_card", true); ajaxhandler.setrequestheader("content-type","application/x-www-form-urlencoded"); ajaxhandler.send("name="+name+"&front_content="+front_content); 

and here's have on server side:

$front_content = substr($_post['front_content'], strpos($_post['front_content'], ",")+1);  $decodeddata=base64_decode($front_content);  $fp = fopen( getcwd().'/assets/img/canvas.png', 'wb' ); fwrite( $fp, $decodeddata); fclose( $fp ); 

this creates file appears right size, , of right dimensions. however, file blank. none of image data in canvas shows up. what's being done wrong here?

when using jquery.post() see: http://api.jquery.com/jquery.post/ ""application/x-www-form-urlencoded" content-type not needed:

javascript:

  // save canvas image data url (png format default)   var dataurl = canvas.todataurl();   $.post("canvasdata.php", { data: dataurl } ); 

php:

//see: how save html5 canvas.todataurl string png on php backend string-as-a-png-on-a-php-backend

 file_put_contents('test.png', base64_decode(substr($_post['data'], strpos($_post['data'], ",")+1))); 

update if don't use jquery use this:

  // save canvas image data url (png format default)   var dataurl = canvas.todataurl();   //$.post("canvasdata.php", { data: dataurl } );    var ajaxhandler = new xmlhttprequest();   ajaxhandler.open("post", "canvasdata.php", true);   //ajaxhandler.setrequestheader("content-type","application/x-www-form-urlencoded");   //ajaxhandler.send("name=test&data="+dataurl);   var formdata = new formdata();   formdata.append("name", "test");   formdata.append("data", dataurl);   ajaxhandler.send(formdata);