{"id":937,"date":"2023-09-27T08:47:56","date_gmt":"2023-09-27T00:47:56","guid":{"rendered":"https:\/\/blog.nonot.cn\/?p=937"},"modified":"2024-07-08T15:25:43","modified_gmt":"2024-07-08T07:25:43","slug":"%e9%80%9a%e8%bf%87jsignature%e6%8f%92%e4%bb%b6%e5%ae%9e%e7%8e%b0h5%e7%ad%be%e5%90%8d%e7%9a%84%e5%ae%8c%e6%95%b4%e5%8f%af%e8%bf%90%e8%a1%8c%e5%ae%9e%e4%be%8b%ef%bc%8c%e6%a8%aa%e5%b1%8f%e3%80%81","status":"publish","type":"post","link":"https:\/\/blog.nonot.cn\/index.php\/2023\/09\/27\/%e9%80%9a%e8%bf%87jsignature%e6%8f%92%e4%bb%b6%e5%ae%9e%e7%8e%b0h5%e7%ad%be%e5%90%8d%e7%9a%84%e5%ae%8c%e6%95%b4%e5%8f%af%e8%bf%90%e8%a1%8c%e5%ae%9e%e4%be%8b%ef%bc%8c%e6%a8%aa%e5%b1%8f%e3%80%81\/","title":{"rendered":"\u901a\u8fc7jSignature\u63d2\u4ef6\u5b9e\u73b0h5\u7b7e\u540d\u7684\u5b8c\u6574\u53ef\u8fd0\u884c\u5b9e\u4f8b\uff0c\u6a2a\u5c4f\u3001\u7ad6\u5c4f\u4e24\u4e2a\u5b9e\u4f8b"},"content":{"rendered":"
\u4e00\u3001\u63d2\u4ef6\u5b89\u88c5\uff1a<\/div>\n
\u00a0http:\/\/willowsystems.github.io\/jSignature\/#\/about\/<\/div>\n
<\/div>\n
\u4e8c\u3001\u7ad6\u5c4f\u5b9e\u4f8b<\/div>\n
\u6ce8\u610f\uff1acss\u4e2d\u7684# #signature {}\u4e0ejs\u4e2d\u7684\u521d\u59cb\u5316jSignature\u63d2\u4ef6 $sigdiv.jSignature({})\u76f8\u547c\u5e94\uff0c\u8fd9\u5757\u662f\u4e2a\u5751\u5440\uff01\u7f51\u4e0a\u5f88\u6709\u4eba\u8bf4\u6e05\u8fd9\u4e2a\u5751\u3002<\/div>\n
<\/div>\n
#signature {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border: 2px solid #000;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-radius: 4px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846\u5706\u89d2 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 500px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u9ad8\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 96%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u5bbd\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(255, 255, 255);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: rgb(255, 0, 0);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin: 0 auto;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\/\/ \u521d\u59cb\u5316jSignature\u63d2\u4ef6<\/div>\n
\u00a0 \u00a0 $sigdiv.jSignature({<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “decor-color”: “transparent”,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “height”: “100%”,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “width”: “100%”<\/div>\n
\u00a0 \u00a0 });<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n
<!DOCTYPE html><\/div>\n
<html lang=”en”><\/div>\n
<\/div>\n
<head><\/div>\n
\u00a0 \u00a0 <meta charset=”UTF-8″><\/div>\n
\u00a0 \u00a0 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”><\/div>\n
\u00a0 \u00a0 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″><\/div>\n
\u00a0 \u00a0 <title>\u7b7e\u540d\u7cfb\u7edf<\/title><\/div>\n
<\/head><\/div>\n
<script type=”text\/javascript” src=”js\/vue\/vue.js”><\/script><\/div>\n
<script type=”text\/javascript” src=”js\/jquery\/jquery-3.6.0.min.js”><\/script><\/div>\n
<script type=”text\/javascript” src=”js\/jSignature\/jSignature.min.js”><\/script><\/div>\n
<link rel=”stylesheet” href=”css\/body.css”><\/div>\n
<link href=”js\/font-awesome\/css\/font-awesome.min.css” rel=”stylesheet”><\/div>\n
<\/div>\n
<style><\/div>\n
\u00a0 \u00a0 body {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(243, 243, 243);<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #box {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(225, 225, 225);<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #signature {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border: 2px solid #000;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-radius: 4px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846\u5706\u89d2 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 500px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u9ad8\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 96%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u5bbd\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(255, 255, 255);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: rgb(255, 0, 0);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin: 0 auto;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/* #region ========== search\u9876\u90e8\u5bfc\u822a\u533a ============= *\/<\/div>\n
<\/div>\n
<\/div>\n
\u00a0 \u00a0 #box {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #search {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 55px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: #2f63a7;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 padding-right: 10px;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/* \u5de6\u7bad\u5934 *\/<\/div>\n
<\/div>\n
\u00a0 \u00a0 #search .left-class {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 padding-left: 15px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 padding-top: 10px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 font-size: 18px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #search .left-class span {<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 display: block;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 float: left;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 line-height: 28px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin-right: 10px;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #search .left-class span:nth-child(2) {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 line-height: 32px;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/* #endregion *\/<\/div>\n
<\/div>\n
\u00a0 \u00a0 .sign_title {<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 94%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 55px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: #000000;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 padding-right: 10px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin: 0 auto;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin-top: 20px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 text-align: center;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 font-size: 18px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 font-weight: bold;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 line-height: 55px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-top-left-radius: 10px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-top-right-radius: 10px;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #signature {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border: 2px solid #000;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-bottom-left-radius: 10px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-bottom-right-radius: 10px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u8fb9\u6846\u5706\u89d2 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 250px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u9ad8\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 95.5%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* \u8bbe\u7f6e\u7b7e\u540d\u533a\u57df\u7684\u5bbd\u5ea6 *\/<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(255, 255, 255);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: rgb(255, 0, 0);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin-top: -2px;<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 #writers {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 60px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 text-align: center;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 margin-top: 30px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/* background-color: rgb(232, 167, 167); *\/<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/div>\n
\u00a0 \u00a0 .bt_1 {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 width: 40%;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 height: 50px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(47, 99, 167);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 color: white;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 font-size: 20px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border: 0px;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 border-radius: 5px;<\/div>\n
<\/div>\n
\u00a0 \u00a0 }<\/div>\n
<\/style><\/div>\n
<\/div>\n
<body><\/div>\n
<\/div>\n
\u00a0 \u00a0 <!– search\u9876\u90e8\u5bfc\u822a –><\/div>\n
<\/div>\n
\u00a0 \u00a0 <div id=”search”><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <div class=”left-class” onclick=”javascript:history.back(-1);”><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <i class=”fa fa-angle-left fa-lg”><\/i><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u8fd4\u56de<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/div><\/div>\n
<\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
<\/div>\n
\u00a0 \u00a0 <div class=”sign_title”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u3010\u7b7e\u540d\u533a\u3011<\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
<\/div>\n
\u00a0 \u00a0 <div id=’signature’><\/div><\/div>\n
<\/div>\n
\u00a0 \u00a0 <div id=”writers”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <button class=”bt_1″ type=”button” id=”reset”>\u6e05\u9664\u91cd\u7b7e<\/button><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <span>\u2003<\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <button class=”bt_1″ type=”button” id=”yes”>\u786e\u8ba4\u63d0\u4ea4<\/button><\/div>\n
\u00a0 \u00a0 <\/div><\/div>\n
\u00a0 \u00a0 <div id=”someelement”><img src=”” id=”images”><\/div><\/div>\n
<\/div>\n
<\/body><\/div>\n
<script type=”text\/javascript”><\/div>\n
<\/div>\n
\u00a0 \u00a0 \/\/ \u83b7\u53d6\u7b7e\u540d\u533a\u57df<\/div>\n
\u00a0 \u00a0 var $sigdiv = $(“#signature”);<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/\/ \u521d\u59cb\u5316jSignature\u63d2\u4ef6<\/div>\n
\u00a0 \u00a0 $sigdiv.jSignature({<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “decor-color”: “transparent”,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “height”: “100%”,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 “width”: “100%”<\/div>\n
\u00a0 \u00a0 });<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/\/\u91cd\u7f6e\u753b\u5e03\uff0c\u6e05\u695a\u7b14\u8bb0<\/div>\n
\u00a0 \u00a0 $(“#reset”).click(function () {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#signature”).jSignature(“reset”); \/\/\u91cd\u7f6e\u753b\u5e03\uff0c\u53ef\u4ee5\u8fdb\u884c\u91cd\u65b0\u4f5c\u753b<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#images”).attr(‘src’, ”);<\/div>\n
\u00a0 \u00a0 });<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/\/\u70b9\u51fb\u5173\u95ed\u6309\u94ae\uff0c\u8ba9\u7b7e\u540ddiv\u9690\u85cf\uff0c\u7b7e\u540d\u6309\u94ae\u663e\u793a\u51fa\u6765<\/div>\n
\u00a0 \u00a0 $(“#close”).click(function () {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#signature”).remove();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#writers”).hide();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#write”).show();<\/div>\n
\u00a0 \u00a0 });<\/div>\n
<\/div>\n
\u00a0 \u00a0 \/\/\u70b9\u51fb\u786e\u5b9a\u6309\u94ae,\u628a\u7b7e\u540d\u7684\u8f6c\u6210\u56fe\u7247,\u7136\u540e\u628a\u6570\u636e\u653e\u8fdb\u56fe\u7247\u4e2d,\u6700\u540e\u628a\u56fe\u7247\u4e2d\u7684\u6570\u636e\u4f20\u5230\u540e\u53f0<\/div>\n
\u00a0 \u00a0 $(“#yes”).click(function () {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/\/\u5c06\u753b\u5e03\u5185\u5bb9\u8f6c\u6362\u4e3a\u56fe\u7247<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 var $signature = $(“#signature”)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 var datapair = $signature.jSignature(“getData”, “image”);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 $(“#images”).attr(‘src’, ‘data:’ + datapair[0] + “,” + datapair[1]);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 var src_data = $(“#images”).attr(‘src’);\/\/\u62ff\u5230\u56fe\u7247\u4e2d\u7684src\uff0c\u8fd9\u5c31\u662f\u6211\u4eec\u9700\u8981\u7684base64<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 console.info(src_data);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \/\/\u5728\u8fd9\u91cc\u5c31\u5199\u6211\u4eec\u7684\u540e\u53f0\u64cd\u4f5c<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 http({<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 data: {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 encode: src_data,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 projectId: projectId,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 institutionsId: institutionsId<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 url: ‘projectFile\/save’,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 type: ‘post’,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dataType: ‘json’,<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 success: function (data) {<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 })<\/div>\n
<\/div>\n
<\/div>\n
\u00a0 \u00a0 });<\/div>\n
<\/div>\n
<\/script><\/div>\n
<\/div>\n
<\/html><\/div>\n
\u4e09\u3001\u6a2a\u5c4f\u5b9e\u4f8b<\/div>\n
1\u3001\u4e3b\u9875\u9762\u4ee3\u7801\uff1a<\/div>\n
<\/div>\n
<!DOCTYPE html><\/div>\n
<html lang=”en”><\/div>\n
<\/div>\n
<head><\/div>\n
<meta charset=”UTF-8″><\/div>\n
<title>\u6dfb\u52a0\u624b\u5199\u7b7e\u540d<\/title><\/div>\n
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ \/><\/div>\n
<!– <meta name=”viewport” content=”initial-scale=1.0, target-densitydpi=device-dpi” \/> –><\/div>\n
<meta name=”viewport”<\/div>\n
content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″><\/div>\n
<!– uc\u5f3a\u5236\u7ad6\u5c4f –><\/div>\n
<meta name=”screen-orientation” content=”portrait”><\/div>\n
<!– QQ\u5f3a\u5236\u7ad6\u5c4f –><\/div>\n
<meta name=”x5-orientation” content=”portrait”><\/div>\n
<!– UC\u5f3a\u5236\u5168\u5c4f –><\/div>\n
<meta name=”full-screen” content=”yes”><\/div>\n
<!– QQ\u5f3a\u5236\u5168\u5c4f –><\/div>\n
<meta name=”x5-fullscreen” content=”true”><\/div>\n
<script src=”js\/jquery-3.2.1.min.js”><\/script><\/div>\n
<script src=”js\/jSignature.min.js”><\/script><\/div>\n
<link rel=”stylesheet” href=”css\/index.css”><\/div>\n
<\/head><\/div>\n
<style type=”text\/css”><\/div>\n
.buttonWrap {<\/div>\n
\u00a0 \u00a0 justify-content: flex-end;<\/div>\n
}<\/div>\n
<\/style><\/div>\n
<body><\/div>\n
<div class=”signature_wrap” id=”signature_wrap”><\/div>\n
<div class=”placeholderBox”><\/div>\n
<div v-if=”isSignaturePadEmpty” class=”sign-tips”><\/div>\n
<div class=”sign-tip”>\u8bf7\u4f7f\u7528\u6b63\u6977\u4e66\u5199\u7b7e\u540d<\/div><\/div>\n
<div class=”sign-tip”>\u4fdd\u8bc1\u5b57\u8ff9\u6e05\u6670\u53ef\u8fa8<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div class=”signTip”><\/div>\n
<div class=”subSignTip”><\/div>\n
<span>\u6dfb<\/span><span>\u52a0<\/span><span>\u624b<\/span><span>\u5199<\/span><span>\u7b7e<\/span><span>\u540d<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<div id=”signature”><\/div><\/div>\n
<div class=”buttonWrap”><\/div>\n
<style type=”text\/css”><\/div>\n
.cz-btn{<\/div>\n
width: 50px;<\/div>\n
height: 40px;<\/div>\n
display: flex;<\/div>\n
justify-content: center;<\/div>\n
align-items: center;<\/div>\n
background-color: #1EAFE9;<\/div>\n
border-radius: 3px;<\/div>\n
margin-right: 10px;<\/div>\n
color:#FFFFFF;<\/div>\n
}<\/div>\n
.cz-btn-box{<\/div>\n
width: 130px;<\/div>\n
transform: rotate(90deg);<\/div>\n
margin-bottom: 50px;<\/div>\n
display: flex;<\/div>\n
justify-content: center;<\/div>\n
align-items: center;<\/div>\n
}<\/div>\n
<\/style><\/div>\n
<div class=”cz-btn-box”><\/div>\n
<span class=”cz-btn” id=”changeToImg”>\u63d0\u4ea4<\/span><\/div>\n
<span class=”cz-btn” id=”reset”>\u6e05\u7a7a<\/span><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<\/div><\/div>\n
<!– <p>\u56fe\u7247\u9884\u89c8\uff1a<\/p><\/div>\n
<div id=”imgShow”><\/div> –><\/div>\n
<div class=”shadowBox”><\/div>\n
\u8bf7\u65cb\u8f6c\u5c4f\u5e55\u518d\u6d4f\u89c8<\/div>\n
<\/div><\/div>\n
<script><\/div>\n
var signObj = $(‘#signature’);<\/div>\n
var evt = “onorientationchange” in window ? “orientationchange” : “resize”;<\/div>\n
window.addEventListener(evt, resize, false);<\/div>\n
\/\/ \u76d1\u542c\u5c4f\u5e55\u65cb\u8f6c<\/div>\n
function resize(fals) {<\/div>\n
var currDeviceObj = currDevice();<\/div>\n
if (window.orientation == 0 || window.orientation == 180) {<\/div>\n
if ($(‘.shadowBox’).hasClass(‘active’)) {<\/div>\n
window.location.reload()<\/div>\n
}<\/div>\n
} else {<\/div>\n
if (currDeviceObj.mobile) {<\/div>\n
if (!currDevice.iPad) {<\/div>\n
$(‘.shadowBox’).addClass(‘active’)<\/div>\n
} else {<\/div>\n
$(‘.shadowBox’).removeClass(‘active’)<\/div>\n
}<\/div>\n
}<\/div>\n
}<\/div>\n
}<\/div>\n
resize(true);<\/div>\n
$(function () {<\/div>\n
var currDeviceObj = currDevice();<\/div>\n
var whArr = deviceBrowserWH();<\/div>\n
if(whArr[0]>whArr[1]){<\/div>\n
\/\/ \u6a2a\u5c4f<\/div>\n
$(‘.signTip’).css({<\/div>\n
width: ‘100vw’<\/div>\n
});<\/div>\n
if(currDeviceObj.mobile){<\/div>\n
if (!currDevice.iPad) {<\/div>\n
$(‘.shadowBox’).addClass(‘active’)<\/div>\n
}else{<\/div>\n
$(‘.shadowBox’).removeClass(‘active’)<\/div>\n
}<\/div>\n
}<\/div>\n
<\/div>\n
} else {<\/div>\n
$(‘.subSignTip span,.buttonWrap img’).css({<\/div>\n
transform: ‘rotate(90deg)’,<\/div>\n
display: ‘inline-block’<\/div>\n
});<\/div>\n
}<\/div>\n
\/\/ \u521d\u59cb\u5316\u753b\u5e03<\/div>\n
signObj.jSignature({<\/div>\n
width: ‘100vw’,<\/div>\n
height: ‘100vh’,<\/div>\n
‘UndoButton’: false,<\/div>\n
lineWidth: 5,<\/div>\n
color: ‘#000’<\/div>\n
});<\/div>\n
$(“#signature”).bind(‘change’, function (e) {<\/div>\n
$(‘.placeholderBox’).hide();<\/div>\n
})<\/div>\n
\/\/ \u6e05\u7a7a\u753b\u5e03<\/div>\n
$(‘#reset’).click(function () {<\/div>\n
signObj.jSignature(“reset”);<\/div>\n
$(‘.placeholderBox’).show();<\/div>\n
})<\/div>\n
\/\/ \u8f6c\u6362\u6210\u56fe\u7247<\/div>\n
$(‘#changeToImg’).click(function () {<\/div>\n
convertToImg();<\/div>\n
})<\/div>\n
})<\/div>\n
\/**<\/div>\n
* \u83b7\u53d6\u8bbe\u5907\u3001\u6d4f\u89c8\u5668\u7684\u5bbd\u5ea6\u548c\u9ad8\u5ea6<\/div>\n
* @returns<\/div>\n
*\/<\/div>\n
function deviceBrowserWH() {<\/div>\n
\/\/\u83b7\u53d6\u6d4f\u89c8\u5668\u7a97\u53e3\u7684\u5185\u90e8\u5bbd\u9ad8 – IE9+\u3001chrome\u3001firefox\u3001Opera\u3001Safari\uff1a<\/div>\n
var w = window.innerWidth;<\/div>\n
var h = window.innerHeight;<\/div>\n
<\/div>\n
\/\/ HTML\u6587\u6863\u6240\u5728\u7a97\u53e3\u7684\u5f53\u524d\u5bbd\u9ad8 – IE8.7.6.5<\/div>\n
document.documentElement.clientWidth;<\/div>\n
document.documentElement.clientHeight;<\/div>\n
document.body.clientWidth;<\/div>\n
document.body.clientHeight;<\/div>\n
<\/div>\n
var screenW = window.screen.width;\/\/\u8bbe\u5907\u7684\u5bbd\u5ea6<\/div>\n
var screenH = document.body.clientHeight;<\/div>\n
<\/div>\n
\/\/\u7f51\u9875\u53ef\u89c1\u533a\u57df\u5bbd\u9ad8\uff0c\u4e0d\u5305\u62ec\u5de5\u5177\u680f\u548c\u6eda\u52a8\u6761\uff08\u6d4f\u89c8\u5668\u7a97\u53e3\u53ef\u89c6\u533a\u57df\u5927\u5c0f\uff09<\/div>\n
var webpageVisibleW = document.documentElement.clientWidth || document.body.clientWidth;<\/div>\n
var webpageVisibleH = document.documentElement.clientHeight || document.body.clientHeight;<\/div>\n
<\/div>\n
\/\/\u7f51\u9875\u6b63\u6587\u5168\u6587\u5bbd\u9ad8(\u4e0d\u5305\u62ec\u6eda\u52a8\u6761)<\/div>\n
var webpageW = document.documentElement.scrollWidth || document.body.scrollWidth;<\/div>\n
var webpageH = document.documentElement.scrollHeight || document.body.scrollHeight;<\/div>\n
<\/div>\n
\/\/\u7f51\u9875\u53ef\u89c1\u533a\u57df\u5bbd\u9ad8\uff0c\u5305\u62ec\u6eda\u52a8\u6761\u7b49\u8fb9\u7ebf\uff08\u4f1a\u968f\u7a97\u53e3\u7684\u663e\u793a\u5927\u5c0f\u6539\u53d8\uff09<\/div>\n
var webpageVisibleW2 = document.documentElement.offsetWidth || document.body.offsetWidth;<\/div>\n
var webpageVisibleH2 = document.documentElement.offsetHeight || document.body.offsetHeight;<\/div>\n
return [w,h]<\/div>\n
\/\/\u7f51\u9875\u5377\u53bb\u7684\u8ddd\u79bb\u4e0e\u504f\u79fb\u91cf<\/div>\n
\/*<\/div>\n
1.scrollLeft:\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u7ed9\u5b9a\u5bf9\u8c61\u5de6\u8fb9\u754c\u4e0e\u7a97\u53e3\u4e2d\u76ee\u524d\u53ef\u89c1\u5185\u5bb9\u7684\u6700\u5de6\u7aef\u4e4b\u95f4\u7684\u8ddd\u79bb\uff1b<\/div>\n
2.scrollTop:\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u7ed9\u5b9a\u5bf9\u8c61\u6700\u9876\u7aef\u4e0e\u7a97\u53e3\u4e2d\u76ee\u524d\u53ef\u89c1\u5185\u5bb9\u7684\u6700\u5de6\u7aef\u4e4b\u95f4\u7684\u8ddd\u79bb\uff1b<\/div>\n
3.offsetLeft:\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u7ed9\u5b9a\u5bf9\u8c61\u76f8\u5bf9\u4e8e\u7248\u9762\u6216\u7531offsetParent\u5c5e\u6027\u6307\u5b9a\u7684\u7236\u5750\u6807\u7684\u8ba1\u7b97\u5de6\u4fa7\u4f4d\u7f6e\uff1b<\/div>\n
4.offsetTop:\u8bbe\u7f6e\u6216\u83b7\u53d6\u4f4d\u4e8e\u7ed9\u5b9a\u5bf9\u8c61\u76f8\u5bf9\u4e8e\u7248\u9762\u6216\u7531offsetParent\u5c5e\u6027\u6307\u5b9a\u7684\u7236\u5750\u6807\u7684\u8ba1\u7b97\u9876\u7aef\u4f4d\u7f6e\uff1b<\/div>\n
*\/<\/div>\n
<\/div>\n
}<\/div>\n
\/**<\/div>\n
* \u5224\u65ad\u5f53\u524d\u8bbe\u5907<\/div>\n
* @returns<\/div>\n
*\/<\/div>\n
function currDevice() {<\/div>\n
var u = navigator.userAgent;<\/div>\n
var app = navigator.appVersion;\/\/ appVersion \u53ef\u8fd4\u56de\u6d4f\u89c8\u5668\u7684\u5e73\u53f0\u548c\u7248\u672c\u4fe1\u606f\u3002\u8be5\u5c5e\u6027\u662f\u4e00\u4e2a\u53ea\u8bfb\u7684\u5b57\u7b26\u4e32\u3002<\/div>\n
var browserLang = (navigator.browserLanguage || navigator.language).toLowerCase();\/\/\u83b7\u53d6\u6d4f\u89c8\u5668\u8bed\u8a00<\/div>\n
<\/div>\n
var deviceBrowser = function () {<\/div>\n
return {<\/div>\n
trident: u.indexOf(‘Trident’) > -1,\u00a0 \/\/IE\u5185\u6838<\/div>\n
presto: u.indexOf(‘Presto’) > -1,\u00a0 \/\/opera\u5185\u6838<\/div>\n
webKit: u.indexOf(‘AppleWebKit’) > -1,\u00a0 \/\/\u82f9\u679c\u3001\u8c37\u6b4c\u5185\u6838<\/div>\n
gecko: u.indexOf(‘Gecko’) > -1 && u.indexOf(‘KHTML’) == -1,\u00a0 \/\/\u706b\u72d0\u5185\u6838<\/div>\n
mobile: !!u.match(\/AppleWebKit.*Mobile.*\/),\u00a0 \/\/\u662f\u5426\u4e3a\u79fb\u52a8\u7ec8\u7aef<\/div>\n
ios: !!u.match(\/\\(i[^;]+;( U;)? CPU.Mac OS X\/),\u00a0 \/\/ios\u7ec8\u7aef<\/div>\n
android: u.indexOf(‘Android’) > -1 || u.indexOf(‘Linux’) > -1,\u00a0 \/\/android\u7ec8\u7aef\u6216\u8005uc\u6d4f\u89c8\u5668<\/div>\n
iPhone: u.indexOf(‘iPhone’) > -1,\u00a0 \/\/\u662f\u5426\u4e3aiPhone\u6216\u8005QQHD\u6d4f\u89c8\u5668<\/div>\n
iPad: u.indexOf(‘iPad’) > -1,\u00a0 \/\/\u662f\u5426iPad<\/div>\n
webApp: u.indexOf(‘Safari’) == -1,\u00a0 \/\/\u662f\u5426web\u5e94\u7528\u7a0b\u5e8f\uff0c\u6ca1\u6709\u5934\u90e8\u548c\u5e95\u90e8<\/div>\n
weixin: u.indexOf(‘MicroMessenger’) > -1,\u00a0 \/\/\u662f\u5426\u5fae\u4fe1<\/div>\n
qq: u.match(\/\\sQQ\/i) == ” qq”,\u00a0 \/\/\u662f\u5426QQ<\/div>\n
}<\/div>\n
}();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 console.log(deviceBrowser);<\/div>\n
return deviceBrowser;<\/div>\n
}<\/div>\n
\/\/ \u83b7\u53d6\u5f53\u524d\u751f\u6210\u7684\u56fe\u7247<\/div>\n
function convertToImg() {<\/div>\n
\/\/\u53ef\u9009\u683c\u5f0f\uff1anative,image,base30,image\/jsignature;base30,svg,image\/svg+xml,svgbase64,image\/svg+xml;base64<\/div>\n
\/\/ var dataStr = “data:” + $(“#signature”).jSignature(‘getData’, “image”);<\/div>\n
var dataStr = “data:” + $(“#signature”).jSignature(‘getData’, “svgbase64”);<\/div>\n
localStorage.setItem(‘userImg’,dataStr);<\/div>\n
console.log(dataStr);<\/div>\n
\/\/ location.href=”sueccess.html”;<\/div>\n
}<\/div>\n
<\/div>\n
<\/script><\/div>\n
<\/body><\/div>\n
<\/div>\n
<\/html><\/div>\n","protected":false},"excerpt":{"rendered":"

\u4e00\u3001\u63d2\u4ef6\u5b89\u88c5\uff1a \u00a0http:\/\/willowsystems.…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,3],"tags":[],"class_list":["post-937","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-javascript"],"_links":{"self":[{"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/posts\/937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/comments?post=937"}],"version-history":[{"count":2,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/posts\/937\/revisions"}],"predecessor-version":[{"id":940,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/posts\/937\/revisions\/940"}],"wp:attachment":[{"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/media?parent=937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/categories?post=937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.nonot.cn\/index.php\/wp-json\/wp\/v2\/tags?post=937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}