我在一个生成艺术项目上工作，我想让用户从算法中保存结果图像。大意是:
使用生成算法在HTML5 Canvas上创建图像
当图像完成时，允许用户将画布作为图像文件保存到服务器
允许用户下载图像或将其添加到使用该算法生成的图像库中。
然而，我卡在了第二步上。在谷歌的帮助下，我找到了这篇博客文章，这似乎正是我想要的:
这就引出了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)。
我做错了什么吗?我存储文件的路径是可写的，所以这不是一个问题，但似乎什么都没有发生，我不确定如何调试这一点。
Edit
下面是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。但是，我仍然无法打开它，它似乎没有被格式化为图像。
下面是一个如何实现你所需要的例子:
画一些东西(取自画布教程)
<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>
将画布图像转换为URL格式(base64)
/ /脚本
var dataURL = canvas.toDataURL();
通过Ajax将其发送到服务器
. ajax({美元
类型:“文章”,
url:“script.php”,
数据:{
imgBase64: dataURL
｝
}) .done(函数(o) {
console.log('保存');
//如果你想让文件在浏览器中可见
// -请在javascript中修改回调。所有你
//需要的是返回url到刚才保存的文件
//然后将图像放到浏览器中。
});
将base64保存在服务器上作为映像(这里是如何在PHP中做到这一点，在每种语言中都是相同的想法。PHP服务器端可以在这里找到):
我认为你应该将图像转换为base64，然后转换为Blob，并将其发送到服务器。当你使用base64图像时，很多行会被发送到服务器。对于blob，它只是文件。
你可以使用下面的代码:
function dataURLtoBlob(dataURL) {
let array, binary, i, len;
binary = atob(dataURL.split(',')[1]);
array = [];
i = 0;
len = binary.length;
while (i < len) {
array.push(binary.charCodeAt(i));
i++;
}
return new Blob([new Uint8Array(array)], {
type: 'image/png'
});
};
这里是canvas代码:
const canvas = document.getElementById('canvas');
const file = dataURLtoBlob( canvas.toDataURL() );
之后，你可以使用ajax与表单:
const fd = new FormData;
fd.append('image', file);
$.ajax({
type: 'POST',
url: '/url-to-save',
data: fd,
processData: false,
contentType: false
});
CoffeeScript语法中的代码:
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代码:
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
