我正在尝试从画布生成图像,并通过用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。

最佳答案

我终于设法做到了,问题出在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.';
?>


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

09-10 10:33
查看更多