您的位置：首页 > Web前端 > HTML5

HTML5 canvas电子签名与截图

2017-12-14 09:15 531 查看

一：效果图

二：页面代码

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>电子签名截屏</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="canvasDiv">
<div id="editing_area">
<canvas id="canvasEdit"></canvas>
</div>
</div>
<div class="btnDiv">
<a id="sign_clear" class="clearBtn">清除</a>
<a id="sign_clear1" class="down none" download="download">下载</a>
<a id="sign_clear2" class="clearBtn">截屏</a>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/esign.js"></script>
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<script type="text/javascript">
function convertCanvasToImage(canvas) {
return canvas.toDataURL("image/png");
};

function takeScreenshot() {
html2canvas(document.body, {
width: document.body.clientWidth / 2 + 1,
}).then(function(canvas) {
alert('截取成功');
var imgUrl = convertCanvasToImage(canvas); //截取图片路径,该路径为服务器参数
console.log(imgUrl);
document.querySelector(".down").setAttribute('href', canvas.toDataURL());
$('#sign_clear1').removeClass('none');
});
};
$(function() {
//初始化
$(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
$(document).on('click', '#sign_clear2', takeScreenshot);
});
</script>
</body>

</html>

三：js路径
https://pan.baidu.com/s/1i5IQiY5

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航