用ajax发布发送base64图像

Question

我正在尝试从画布生成图像，并通过用ajax发出的POST请求将其发送到服务器。 我正在使用html2canvas将div转换为canvas并使用toDataURL（）将其转换为base64。

这是我的JS：

  function genImg(){ html2canvas(document.querySelector("#ogImage")).then(canvas => { var renderedImg = canvas.toDataURL() $.ajax({ type: "POST", url: "script.php", data: { base64Img: renderedImg } }).done(function(o){ console.log("saved") console.log(renderedImg); }) }); } 

这是我的script.php文件：

<?php
   $img = $_POST['data'];
   $img = str_replace('data:image/png;base64, ', '', $img);
   $img = str_replace(' ', '+', $img);
   $fileData = base64_decode($img);
   //saving
   $fileName = 'photo.png';
   file_put_contents($fileName, $fileData);
?>

这两个脚本都可以工作，并且使用正确的输出名称生成了png，但是生成的png为空。 我检查了接收到的请求以及邮件发送的内容，两者是不同的... console.log（renderedImg）是一个非常长的base64代码。 该请求也是base64代码，但明显较短。 POST请求可以发送什么内容？ 还是我忘记了什么？

同样要检查我的问题所在，我复制/粘贴了javascript console.log（renderedImg）输出，并使用https://www.base64decode.org/对其进行解码，结果正是我需要的图像。 然后，我尝试使用POST请求数据，结果与生成的png文件相同，为空。

因此，我很确定我的问题是何时将数据从ajax发送到PHP。

Answer 1

数据url的格式为data:[<media type>][;base64],<data>您必须先剥离data:[<media type>][;base64],然后再解码。
还使用$_POST['base64Img']访问数据，因为base64Img是您在ajax请求中使用的内容

Answer 2

我终于设法做到了，问题出在PHP文件中：

<?php
 define('UPLOAD_DIR', 'images/');
 // previously it was $img = $_POST['data']
 $img = $_POST['imgBase64'];
 $img = str_replace('data:image/png;base64,', '', $img);
 $img = str_replace(' ', '+', $img);
 $data = base64_decode($img);
 $file = UPLOAD_DIR . 'test.png';
 $success = file_put_contents($file, $data);
 //send request to ocr
 print $success ? $file : 'Unable to save the file.';
?>

从现在开始，我保存的图像正是所需的图像