0

我正在使用 ajax 查询来上传画布图像数据以及其他一些变量。以下是客户端的相关代码：

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

这就是我在服务器端所拥有的：

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

这将创建一个看起来大小合适且尺寸合适的文件。但是，该文件是空白的。画布中的所有图像数据均未显示。这里做错了什么？

4

1 回答 1

0

使用 jQuery.post() 时，请参阅：http ://api.jquery.com/jQuery.post/不需要“应用程序/x-www-form-urlencoded”内容类型：

javascript:

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

php:

//请参阅：如何在 php 后端 string-as-a-png-on-a-php-backend上将 html5 Canvas.toDataURl 字符串保存为 png

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

更新 如果你不使用 jquery 使用这个：

  // 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);
于 2013-05-04T14:33:28.747 回答