重命名从 HTML5 画布创建的图像

Question

我制作了一个简单的画布并将其另存为图像。我在这段代码的帮助下做到了这一点：

 var canvas = document.getElementById("mycanvas");
 var img    = canvas.toDataURL("image/png");

并弹出创建的图像：

document.write('<img src="'+img+'"/>');

但它的名字总是很奇怪。我想重命名图像名称faizan.jpg等。我该怎么做？

Answer 1

简而言之，你不能。当您在 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";