将画布图像保存到服务器

Posted

技术标签:

【中文标题】将画布图像保存到服务器【英文标题】:save canvas image to server 【发布时间】:2015-01-28 13:42:54 【问题描述】:

我正在尝试。我可以保存文件,但它总是 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.';
?> 

【问题讨论】:

你在哪里画到你的画布上 可能重复:***.com/questions/13198131/… 我不太确定你的意思。我将它绘制在与上面的 javascript 相同的页面上。 这是我弄清楚如何获得我所拥有的东西的链接。问题是,当我按照这些指示进行操作时,我得到了 0 个字节。 【参考方案1】:

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

其次,您似乎正在此 php 行中寻找img

$img = $_POST['img'];

但在您的 javascript 中,您将其定义为 imgBase64 in:

data:  
   imgBase64: dataURL

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

【讨论】:

谢谢。当我按照您的建议将 'img' 替换为 'imgBase64' 时,问题已得到解决。我曾尝试插入“dataUrl”,但这不起作用。另外,我在发布之前的代码中有 console.log(dataURL) ,但把它拿出来了。

以上是关于将画布图像保存到服务器的主要内容,如果未能解决你的问题,请参考以下文章

将画布图像保存到服务器

将画布作为 jpg 文件保存到服务器时如何增加 DPI?

将 three.js 生成的画布保存到服务器 - 没有文件被保存

按下按钮时,HTML画布将JPG图像输出到服务器

如何将内联 svg(在 DOM 中)绘制到画布上?

将 HTML 5 画布保存到 Chrome 中的文件?