提交 www

2025-04-29 09:09:06 +08:00
parent 2f5d5e0a3c
commit 62986c4157
2266 changed files with 313631 additions and 0 deletions
@@ -0,0 +1,152 @@
+<!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>