如何将HTML5 Canvas作为图像保存在服务器上？
我正在创作一个生成性艺术项目，我希望允许用户从算法中保存最终的图像。 总体思路是：
但是，我坚持第二步。 在Google的一些帮助下，我发现了这篇博文，这篇博文似乎正是我想要的：
这导致了JavaScript代码：
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST", "testSave.php", false);
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.setRequestHeader("Content-Type", "application/upload");
ajax.send("imgData=" + canvasData);
}
和相应的PHP（testSave.php）：
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
$imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData = substr($imageData, strpos($imageData, ",") + 1);
$unencodedData = base64_decode($filteredData);
$fp = fopen('/path/to/file.png', 'wb');
fwrite($fp, $unencodedData);
fclose($fp);
}
?>
但这似乎并没有做任何事情。
更多谷歌搜索发布了基于上一篇教程的博客文章。 没有什么不同，但也许值得一试：
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);
file_put_contents($file, base64_decode($uri));
echo $file;
这个创建一个文件（耶），但它已损坏，似乎并不包含任何东西。 它也似乎是空的（文件大小为0）。
有什么真的很明显，我做错了吗？ 我存储我的文件的路径是可写的，所以这不是问题，但似乎没有发生，我真的不知道如何调试。
编辑
遵循Salvidor Dali的链接，我将AJAX请求更改为：
function saveImage() {
var canvasData = canvas.toDataURL("image/png");
var xmlHttpReq = false;
if (window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function() {
console.log(ajax.responseText);
}
ajax.send("imgData=" + canvasData);
}
现在图像文件被创建并且不是空的！ 看起来内容类型很重要，并且将其更改为x-www-form-urlencoded允许发送图像数据。
控制台返回（相当大的）base64代码字符串，数据文件大约为140 kB。 但是，我仍然无法打开它，它似乎没有被格式化为图像。
以下是一个如何实现你所需要的例子：
1） 画一些东西 （取自画布教程）
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
2） 将画布图像转换为URL格式（base64）
var dataURL = canvas.toDataURL();
3） 通过Ajax将其发送到您的服务器
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
// If you want the file to be visible in the browser
// - please modify the callback in javascript. All you
// need is to return the url to the file, you just saved
// and than put the image in your browser.
});
3） 将base64作为图像保存在服务器上 （以下是如何在PHP中执行此操作，每种语言都有相同的想法，PHP中的服务器端可以在这里找到）：
我两周前玩过这个游戏，非常简单。 唯一的问题是，所有的教程只是谈论本地保存图像。 这是我做到的：
1）我设置了一个表单，这样我就可以使用POST方法。
2）当用户完成绘图时，他可以点击“保存”按钮。
3）单击按钮时，将图像数据放入隐藏字段中。 之后我提交表格。
document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();
4）当表单submited时，我有这个小的PHP脚本：
<?php
$upload_dir = somehow_get_upload_dir(); //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>
我认为你应该将base64中的图像转换为blob图像，因为当你使用base64图像时，需要很多日志行或者很多行将发送到服务器。 随着blob，它只是文件。 你可以使用下面的代码：
dataURLtoBlob = (dataURL) ->
# Decode the dataURL
binary = atob(dataURL.split(',')[1])
# Create 8-bit unsigned array
array = []
i = 0
while i < binary.length
array.push binary.charCodeAt(i)
i++
# Return our Blob object
new Blob([ new Uint8Array(array) ], type: 'image/png')
和画布代码在这里：
canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())
之后，你可以使用表单使用ajax：
fd = new FormData
# Append our Canvas image file to the form data
fd.append 'image', file
$.ajax
type: 'POST'
url: '/url-to-save'
data: fd
processData: false
contentType: false
此代码使用CoffeeScript语法。
链接地址: http://www.djcxy.com/p/61147.html