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

Question

我已经制作了一个简单的画布并将其保存为图像。我是在以下代码的帮助下完成的:

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

并弹出创建的图像:

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

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

Answer 1

简单地说，你不能。当你在HTMLCanvasElement上调用toDataURL方法时，它会生成一个字符串表示的图像作为一个DataURL。因此，如果你试图保存图像，浏览器会给它一个默认的文件名(例如，如果数据URL是png文件，Opera会将其保存为default.png)。

存在许多解决方法。最简单的方法是对服务器进行AJAX调用，将图像保存在服务器端，并返回保存图像的URL，然后可以在客户端访问和保存该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";

Answer 2

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";
?>