文章/答案/技术大牛

发布

社区首页 >问答首页 >重命名从HTML5画布创建的图像

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

Stack Overflow用户

提问于 2011-09-18 16:39:45

回答 2查看 3.6K关注 0票数 4

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

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

并弹出创建的图像，其中包含以下内容：

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

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

filenames

html5-canvas

data-url

javascript

html

Stack Overflow用户

发布于 2011-09-18 17:25:36

当您在HTMLCanvasElement上调用toDataURL方法时，它会以Data 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";

票数 3

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7460396

复制

相似问题

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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