[英]Save drawing from canvas to Local folder
I'm developing a web application with signature capture and storage functionality. 我正在开发一个具有签名捕获和存储功能的Web应用程序。 I have done the image catering using canvas drawing. 我使用画布绘图完成了图像餐饮。
Here is my code: 这是我的代码:
<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" alt="Right click to save me!">
<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>
I want to store the signature image to my local folder. 我想将签名图像存储到我的本地文件夹。 Can anybody suggest a way to do this ? 任何人都可以建议一种方法吗? Thanks for any suggestion. 谢谢你的任何建议。
I'd recommend using something like FileSaver.js to get the most cross browser solution. 我建议使用像FileSaver.js这样的东西来获得最多的跨浏览器解决方案。
For Chrome and Firefox you can use something like this: 对于Chrome和Firefox,您可以使用以下内容:
var downloadLink = document.getElementById('my-anchor-tag');
downloadLink.href = dataURL;
downloadLink.setAttribute('download', 'file-name.png');
Note: you could set the download attribute statically in the HTML as well. 注意:您也可以在HTML中静态设置下载属性。
For IE you can use a vendor specific msSaveBlobAs() method. 对于IE,您可以使用特定于供应商的msSaveBlobAs()方法。 More info on that here: http://msdn.microsoft.com/en-us/library/ie/hh779016(v=vs.85).aspx 有关这方面的更多信息: http : //msdn.microsoft.com/en-us/library/ie/hh779016(v = vs。85).aspx
Again one of the best cross browser solutions is FileSaver.js found here: https://github.com/eligrey/FileSaver.js/ 同样最好的跨浏览器解决方案之一是FileSaver.js: https : //github.com/eligrey/FileSaver.js/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.