作者热门文章
- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我正在从事一个生成艺术项目,我希望允许用户保存通过算法生成的图像。总体思路是:
但是,我被困在了第二步。在谷歌的帮助下,我找到了这个 blog post ,这似乎正是我想要的:
这导致了 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);
}
?>
但这似乎根本没有任何作用。
更多谷歌搜索出现了 blog post这是基于上一个教程。差别不大,但也许值得一试:
$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。但是还是打不开,而且好像没有格式化成图片。
最佳答案
以下是如何实现您需要的示例:
<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>
将 Canvas 图像转换为 URL 格式(base64)
// script
var dataURL = canvas.toDataURL();
通过 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.
});
关于javascript - 如何将 HTML5 Canvas 保存为服务器上的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13198131/
我是一名优秀的程序员,十分优秀!