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

【问题标题】：Renaming an image created from an HTML5 canvas重命名从 HTML5 画布创建的图像
【发布时间】：2011-09-18 08:39:45
【问题描述】：

我制作了一个简单的画布并将其保存为图像。我在这段代码的帮助下完成了这项工作：

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

并用这个弹出创建的图像：

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

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

【问题讨论】：

可能相关：stackoverflow.com/questions/6723931/….
简短的回答是在当前浏览器中“不可能”。 long 是“将该图像上传到服务器，将其存储在那里，然后将用户网址提供给它”

标签： javascript html filenames html5-canvas data-url

【解决方案1】：

简单地说，你不能。当您在 HTMLCanvasElement 上调用 toDataURL 方法时，它会生成图像的字符串表示形式作为数据 URL。因此，如果您尝试保存图像，浏览器会为其提供默认文件名（例如，如果数据 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";

【讨论】：

您能解释一下代码在哪里更改图像名称，以及图像在服务器端的保存位置吗？
我假设您对服务器端脚本有所了解。 saveDataURL 函数以数据 URL 的形式将图像发送到服务器。然后服务器简单地读取它，对其进行解码并将其保存在一个文件中（使用自定义名称）并将该文件的 URL 返回给客户端。然后，在 onreadystatechange 函数中加载更改名称的图像。
我之前没有使用 ajax 编写任何服务器端脚本。那就是我在问，这些行中的哪一行正在重命名图像文件名？ request.setRequestHeader("内容类型","application/x-www-form-urlencoded"); request.open("POST", "saveDataURL.php", true); request.send("dataURL=" + canvas.toDataURL());
没有。重命名是在服务器端完成的，我添加了执行此操作的 PHP 脚本。
它不工作 :( 。我已将 php 代码放入 saveDataURL.php

【解决方案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);
}

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

【讨论】：