将画布图像保存到服务器

Question

我正在尝试将画布图像保存到服务器.我可以保存文件,但它总是0字节.我的代码出了什么问题？

<script>
function test(){
var canvas  = document.getElementById("cvs");
var dataURL = canvas.toDataURL();

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

});

}
</script>

PHP:

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

Answer 1

首先，您必须确保在定义canvas变量之后和创建变量之前已经绘制到画布上dataURL

其次，您似乎正在img此 php 行中查找：

$img = $_POST['img'];

但是在您的 javascript 中，您将其定义为imgBase64：

data: { 
   imgBase64: dataURL
}

最后，您应该在创建console.log(dataURL)之后添加dataURL以确保其中有任何内容。