将画布中的绘图保存到本地文件夹
Posted
技术标签:
【中文标题】将画布中的绘图保存到本地文件夹【英文标题】：Save drawing from canvas to Local folder 【发布时间】：2014-03-22 13:09:10 【问题描述】：我正在开发一个具有签名捕获和存储功能的 Web 应用程序。 我已经使用画布绘制完成了图像餐饮。
这是我的代码：
<html>
<head>
<style>
body
margin: 0px;
padding: 0px;
.btn
padding: 10px;
position: absolute;
/*top: 5px;*/
left: 1130px;
.img
padding: 10px;
width: 300px;
height: 300px;
position: absolute;
background-color: white;
top: 50px;
left: 1100px;
.btn2
padding: 10px;
position: absolute;
/*top: 5px;*/
left: 1180px;
</style>
<meta charset="UTF-8">
<script src="js/signature.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<canvas id="cbook" width=1100 height=732> </canvas>
<div id="bottext"><b></b> draw signature here</div>
<div id="toptext">signature capture - test </div>
<div><input type="button" id="clear" class="btn" value="Clear">
<input type="button" id="save" class="btn2" value="Save"></div>
<img id="canvasImg" class="img" >
<script>
var canvas = document.getElementById('cbook');
var context = canvas.getContext('2d');
// bind event handler to clear button
document.getElementById('clear').addEventListener('click', function()
context.clearRect(0, 0, canvas.width, canvas.height);
, false);
document.getElementById('save').addEventListener('click', function()
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
alert("");
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
, false);
</script>
</body>
我想将签名图像存储到我的本地文件夹。有人可以建议一种方法吗？ 感谢您的任何建议。
【问题讨论】：
【参考方案1】：我建议使用 FileSaver.js 之类的东西来获得最跨浏览器的解决方案。
对于 Chrome 和 Firefox，您可以使用如下内容：
var downloadLink = document.getElementById('my-anchor-tag');
downloadLink.href = dataURL;
downloadLink.setAttribute('download', 'file-name.png');
注意：您也可以在 HTML 中静态设置下载属性。
对于 IE，您可以使用供应商特定的 msSaveBlobAs() 方法。更多信息在这里：http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx
最好的跨浏览器解决方案之一是 FileSaver.js，可在此处找到：https://github.com/eligrey/FileSaver.js/
【讨论】：
这是同一个答案：***.com/questions/6045603/…以上是关于将画布中的绘图保存到本地文件夹的主要内容，如果未能解决你的问题，请参考以下文章
Python tkinter 将画布保存为 postscript 并添加到 pdf