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

在发送ajax发布请求时，您的数据对象的密钥名称为$img = $_POST['imgBase64'];，应为$img = $_POST['data'];而不是imgBase64。

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

1 个答案: