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

数据网址格式为data:[<media type>][;base64],<data> 在解码之前，您必须剥离data:[<media type>][;base64],部分还可以使用$_POST['base64Img']来访问数据，因为您在ajax请求中使用的是base64Img

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.';
?>

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

发送带有ajax的base64图像

2 个答案: