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>
|