javascript - Base64 图像解码问题 - .png 文件为空？

Question

我正在尝试获取 .png图片来自<canvas>基于html生成的元素代码。

javascript我正在使用的是:

function canvityo() {
        html2canvas(document.body, {
            onrendered: function(canvas) {
            document.body.appendChild( canvas );
            var dataURL = canvas.toDataURL();

        $.ajax({
          type: "POST",
          url: "imgprocess.php",
          data: { 
             imgBase64: dataURL
          }
        }).done(function(o) {
          console.log('saved'); 
        });
  }
});
}

我有html2canvas链接库，它创造了良好的<canvas> (因为我使用了 appendChild ，所以可以看到它们)，现在我想转换那些 <canvas> 。进入photo.png文件，以便能够将其保存在服务器上，或 INSERT INTO如blob到我的“数据库表”。

var dataURL = canvas.toDataURL();

到目前为止，似乎一切都工作正常(我可以设法得到这个 url ，它看起来很长)。由于看起来很奇怪，我非常确定我需要使用 base64 decoding将其检索为 image文件。

我的imgprocess.php看起来像这样:

<?php

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

?>

它确实输出 photo.png文件，但文件是 empty由于我经验不足，我一直在努力寻找此问题的原因。

也许你们可以帮我解决这个问题？

Answer 1

它应该是 $img = $_POST['imgBase64']; 而不是 $img = $_POST['data']; 因为您的数据对象的键名称是imgBase64 发送 ajax post 请求时。