一：效果圖
二：頁面代碼
<!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