152 lines
4.1 KiB
HTML
152 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<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">-->
|
||
<style>
|
||
.canvasDiv {
|
||
width: 800px;
|
||
height: 500px;
|
||
border: 1px solid gray;
|
||
}
|
||
|
||
#editing_area {
|
||
width: 800px;
|
||
height: 500px;
|
||
/*border: 1px solid darkred;*/
|
||
}
|
||
#canvasEdit {
|
||
width: 800px;
|
||
height: 500px;
|
||
/*border: 1px solid gold;*/
|
||
}
|
||
|
||
.btnDiv a {
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="canvasDiv">
|
||
|
||
<div id="editing_area">
|
||
<canvas id="canvasEdit"></canvas>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<span>身份证：</span>
|
||
<span id="idcard"></span>
|
||
</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="../vue/public/js/esign.js"></script>
|
||
<script type="text/javascript" src="../vue/public/js/html2canvas.min.js"></script>
|
||
<script type="text/javascript">
|
||
|
||
|
||
function GetQueryString(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
|
||
var context = "";
|
||
if (r != null)
|
||
context = r[2];
|
||
reg = null;
|
||
r = null;
|
||
return context == null || context == "" || context == "undefined" ? "" : context;
|
||
}
|
||
|
||
function convertCanvasToImage(canvas) {
|
||
return canvas.toDataURL("image/png");
|
||
};
|
||
|
||
function checkIDCard(idcode){
|
||
// 加权因子
|
||
var weight_factor = [7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2];
|
||
// 校验码
|
||
var check_code = ['1', '0', 'X' , '9', '8', '7', '6', '5', '4', '3', '2'];
|
||
|
||
var code = idcode + "";
|
||
var last = idcode[17];//最后一位
|
||
|
||
var seventeen = code.substring(0,17);
|
||
|
||
// ISO 7064:1983.MOD 11-2
|
||
// 判断最后一位校验码是否正确
|
||
var arr = seventeen.split("");
|
||
var len = arr.length;
|
||
var num = 0;
|
||
for(var i = 0; i < len; i++){
|
||
num = num + arr[i] * weight_factor[i];
|
||
}
|
||
|
||
// 获取余数
|
||
var resisue = num%11;
|
||
var last_no = check_code[resisue];
|
||
|
||
// 格式的正则
|
||
// 正则思路
|
||
/*
|
||
第一位不可能是0
|
||
第二位到第六位可以是0-9
|
||
第七位到第十位是年份，所以七八位为19或者20
|
||
十一位和十二位是月份，这两位是01-12之间的数值
|
||
十三位和十四位是日期，是从01-31之间的数值
|
||
十五，十六，十七都是数字0-9
|
||
十八位可能是数字0-9，也可能是X
|
||
*/
|
||
var idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
|
||
|
||
// 判断格式是否正确
|
||
var format = idcard_patter.test(idcode);
|
||
|
||
// 返回验证结果，校验码和格式同时正确才算是合法的身份证号码
|
||
return last === last_no && format ? true : false;
|
||
}
|
||
|
||
function closeWin() {
|
||
try {
|
||
window.opener = window;
|
||
var win = window.open("", "_self");
|
||
win.close();
|
||
//frame的时候
|
||
top.close();
|
||
} catch (e) {
|
||
|
||
}
|
||
}
|
||
|
||
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', imgUrl);
|
||
$('#sign_clear1').removeClass('none');
|
||
});
|
||
};
|
||
$(function() {
|
||
|
||
var idcard = GetQueryString("idcard")
|
||
if ( ! idcard || ! checkIDCard(idcard)) {
|
||
// alert("身份证号错误, 非法访问！")
|
||
// closeWin()
|
||
} else {
|
||
|
||
$("#idcard").text( idcard )
|
||
|
||
//初始化
|
||
$(document).esign("canvasEdit", "sign_show", "sign_clear", "sign_ok");
|
||
$(document).on('click', '#sign_clear2', takeScreenshot);
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |