当从base64数据字符串保存Canvas图像到服务器端时，会生成空白图像。

Question

我有一个关于在PHP中保存画布图像的问题。我得到了一个空白的 .png 文件。我搜索了很多关于这个问题的资料，但是找不到任何有用的信息。为什么它保存了一个空白的图像而不是呈现真实的图像？

JavaScript 代码：

html2canvas([document.getElementById('dadycool')], {
  onrendered: function (canvas) {
        var data = canvas.toDataURL();
        var image = new Image();
        image.src = data;
        document.getElementById('imagec').appendChild(image);
        console.log(data);
        $.ajax({
  type: "POST",
  url: "up.php",
  data: { 
     imgBase64: data
  }
}).done(function(o) {
  console.log('saved'); 
}); 
}   

PHP 代码：

<?php
// requires php5
define('localhost/samp/sample2/uploads', 'images/');
$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = localhost/samp/sample2/uploads . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

- mkafiyan

---

默认情况下，据我所知，toDataUrl返回的是png图像。$img = str_replace('data:image/jpg;base64,', '', $img); 应该更改为 $img = str_replace('data:image/png;base64,', '', $img);。 - Farid Nouri Neshat

是的，对啊！！我忘记写我的代码更新版本了:D 但是我的问题仍然存在。 - mkafiyan

你可以用PHP-FileUpload及其DataUriUpload组件代替PHP部分，详情请见这里的文档。它还会处理其他事情，比如文件大小限制和多个MIME类型的接受。 - caw

Answer 1

我怀疑您没有配置开发环境来显示PHP错误消息。您正在定义一个无效的常量标识符：

define('localhost/samp/sample2/uploads', 'images/');

这意味着你不能直接使用它：

$file = localhost/samp/sample2/uploads . uniqid() . '.png';

...应该触发：

Notice: Use of undefined constant localhost - assumed 'localhost'
Notice: Use of undefined constant samp - assumed 'samp'
Warning: Division by zero
Notice: Use of undefined constant sample2
Warning: Division by zero
Notice: Use of undefined constant uploads - assumed 'uploads'
Warning: Division by zero

...并且file将只包含基本文件名（例如53676a01cdb59.png），而不包含路径组件。您需要使用以下语法：

$file = constant('localhost/samp/sample2/uploads') . uniqid() . '.png';

... 或者更好的方式是给这个常量起一个合适的名称：

define('DIR_UPLOADS', 'images/');

- Álvaro González

Answer 2

我曾经遇到过同样的问题——看起来base64数据被正确地发送了，但服务器端始终无法生成图像。我找到的解决方案是使用“FormData”对象和非常简单的xhr请求来向服务器发送POST请求。

var url='/path/to/save.php';
var data=oCanvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, '');
var fd=new FormData();
fd.append('imgdata',data);

var request = new XMLHttpRequest();
request.open('POST', url);
request.send(fd);

我99%确定问题是由xhr请求发送的不正确Content-Type头部引起的。使用基本的xhr请求结合FormData强制xhr请求以multipart/formdata内容类型发送，正确定义内容边界。

- Professor Abronsius