Javascript 重命名从HTML5画布创建的图像
我制作了一个简单的画布,并将其保存为图像。我通过以下代码完成了此操作:Javascript 重命名从HTML5画布创建的图像,javascript,html,filenames,html5-canvas,data-url,Javascript,Html,Filenames,Html5 Canvas,Data Url,我制作了一个简单的画布,并将其保存为图像。我通过以下代码完成了此操作: var canvas = document.getElementById("mycanvas"); var img = canvas.toDataURL("image/png"); 并弹出创建的图像,其中包含: document.write('<img src="'+img+'"/>'); document.write(“”); 但它的名字总是很奇怪。我想重命名图像名称,如faizan.jpg等。
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
并弹出创建的图像,其中包含:
document.write('<img src="'+img+'"/>');
document.write(“”);
但它的名字总是很奇怪。我想重命名图像名称,如
faizan.jpg
等。我该怎么做?简单地说,你不能。在HTMLCanvasElement上调用toDataURL方法时,它将生成图像的字符串表示形式作为数据URL。因此,如果您试图保存图像,浏览器将为其提供默认文件名(例如,如果数据URL是png文件,则Opera将其保存为default.png)
存在许多变通办法。最简单的方法是对服务器进行AJAX调用,在服务器端保存图像并返回保存图像的URL,然后可以在客户端访问和保存该图像:
function saveDataURL(canvas) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
window.location.href = request.responseText;
}
};
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.open("POST", "saveDataURL.php", true);
request.send("dataURL=" + canvas.toDataURL());
}
要在服务器端保存图像,请使用以下PHP脚本:
$dataURL = $_POST["dataURL"];
$encodedData = explode(',', $dataURL)[1];
$decodedData = base64_decode($encodedData);
file_put_contents("images/faizan.png", $decodedData);
echo "http://example.com/images/faizan.png";
100%成功!只需要对上面的答案做一点调试。以下是工作代码: JavaScript:
var saveDataURL = function(canvas) {
var dataURL = document.getElementById(canvas).toDataURL();
var params = "dataURL=" + encodeURIComponent(dataURL);
var request = new XMLHttpRequest();
request.open("POST", "/save-data-url.php", true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
window.console.log(dataURL);
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
window.console.log(request.responseText);
}
};
request.send(params);
}
/脚本/save-data-url.php:
<?php
$dataURL = $_POST["dataURL"];
$encodedData = explode(',', $dataURL);
$encodedData = $encodedData[1];
$decodedData = base64_decode($encodedData);
file_put_contents("images/log.txt", $encodedData);
file_put_contents("images/test.png", $decodedData);
echo "http://www.mywebsite.com/images/test.png";
?>
可能相关:。简短的回答在当前浏览器中是“不可能的”。long是“将该图像上传到服务器,存储在那里,并提供用户url”您能否解释一下代码在哪里更改图像名称,以及图像在服务器端的保存位置?我假设您对服务器端脚本了解一点。saveDataURL函数以数据URL的形式将图像发送到服务器。然后服务器只需读取、解码并将其保存在一个文件中(使用自定义名称),然后将该文件的URL返回给客户端。然后,在onreadystatechange函数中加载名称更改后的图像。我以前没有使用ajax编写过任何服务器端脚本。这就是我要问的,哪一行正在重命名图像文件名?setRequestHeader(“内容类型”、“应用程序/x-www-form-urlencoded”);open(“POST”,“saveDataURL.php”,true);request.send(“dataURL=“+canvas.toDataURL());没有。重命名是在服务器端完成的,我添加了一个PHP脚本来完成这项工作。它不起作用:(。我已经将PHP代码放在saveDataURL.PHP中