上传画布图像数据会产生空白图像

Question

I'm using an ajax query to upload canvas image data, along with a few other variables. Here's what the relevant code looks like on the 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 what I have on the 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 a file that appears to be the right size, and is also of the right dimensions. However, the file is blank. None of the image data that was in the canvas shows up. What's being done wrong here?

Answer 1

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

javascript:

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

php:

//see: How to save a html5 Canvas.toDataURl string as a png on a 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 you don't use jquery use this:

  // save canvas image as data url (png format by 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);