上传画布图像数据会导致空白图像 - Uploading canvas image data results in a blank image

Uploading canvas image data results in a blank image

本文关键字：图像数据空白布图像 | 更新日期: 2023-09-27

我使用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 );

这将创建一个看起来大小和尺寸都正确的文件。但是，该文件是空白的。画布中的图像数据没有显示出来。这里做错了什么?

当使用jQuery.post()时，请参阅:http://api.jquery.com/jQuery.post/"application/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:

//参见:如何保存html5 Canvas。

toDataURl字符串作为png在php后端

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