jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件
Posted 小小强学习网
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件相关的知识，希望对你有一定的参考价值。
整理的前面可以用的：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>签名记录</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <script src="__PUBLIC__/mob/js/jquery-1.9.1.min.js"></script> <script src="__PUBLIC__/mob/js/jq-signature.js"></script> </head> <style> *{padding:0;margin:0;} body{background:#eee;} .contents{padding:10px; background:#fff; font-size:13px; color:#333; line-height:24px;} .form-label{line-height:40px; padding:5px;} .form-field{background:#fff;} .butt{padding:5px 10px;} .butt button{padding:10px 20px; background:#eee; border:none; border-radius:5px;} .inputsu{padding-bottom:10px;} .inputsu input{height:50px;line-height:50px;margin-left:10px; border:1px solid #c3c3c3; padding-left:5px;border-radius:5px; width:290px;} .subdiv input{width:98%;margin-left:1%;background:#0a8ddf;text-align:center;height:44px;line-height:44px; border:none;margin-top:10px;border-radius:5px;color:#fff;font-size:16px;} .wentitle{line-height:32px;font-size:14px;color:#333;text-align:center;background:#fff;border-bottom:1px solid #eee;} .headtop{height:10px;width:100%;background:#0a8ddf;} .bodybj{background:#000;height:100%;width:100%;position:fixed;opacity:.3;display:none;} .contents img{width:100% !important;height: auto !important;} .loading{ width: 100%; height: 15px; margin: 0 auto; text-align: center; position:absolute; bottom:60px; } .loading span{ display: inline-block; width: 15px; height: 100%; margin-right: 5px; background: lightgreen; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child{ margin-right: 0px; } @-webkit-keyframes load{ 0%{ opacity: 1; } 100%{ opacity: 0; } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; } </style> <body> <div class="bodybj"> <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="headtop"> </div> <div class="wentitle">{$info["title"]}</div> <div class="contents"> {$info["content"]} </div> <label class="form-label">签名区(请在以下虚框区域内签名)</label> <div class="form-field"> <div class="container"> <div class="js-signature" style="margin-left:10px; width:300px;" data-width="100" data-height="100px" data-border="1px dashed #ccc" data-background="#fff" data-line-color="#000" data-auto-fit="true"> </div> <div class="butt"> <button id="clearBtn" onclick="clearCanvas();">重签</button> <button id="saveBtn" onclick="saveSignature();" disabled>确认</button> </div> <div class="inputsu"><input type="text" name="username" placeholder="输入姓名"></div> <div class="inputsu"><input type="text" name="depart" placeholder="所在部门"></div> <input type="hidden" name="img" id="imgpic" > <input type="hidden" name="signid" value="{$info[\'id\']}" > <input type="hidden" name="type" value="{$type}" > <div id="signature" style="background:red;"> </div> </div> </div> <div class="subdiv"><input type="button" class="submit" value="提交"></div> <script type="text/javascript"> $(document).on(\'ready\', function() { $(\'.js-signature\').jqSignature(); }); function clearCanvas() { $(\'#signature\').html(\'<p><em>Your signature will appear here when you click "Save Signature"</em></p>\'); $(\'.js-signature\').jqSignature(\'clearCanvas\'); $(\'#saveBtn\').attr(\'disabled\', true); } function saveSignature() { } $(\'.js-signature\').on(\'jq.signature.changed\', function() { $(\'#saveBtn\').attr(\'disabled\', false); }); $(".submit").click(function() { $(".bodybj").show(); $(\'#signature\').empty(); var dataUrl = $(\'.js-signature\').jqSignature(\'getDataURL\'); $.ajax({ type: "post", url: "/Mob/index/uploadimg", data: {file:dataUrl}, dataType: "json", success: function(data){ if(data.code==1){ var img=data.msg; var username=$("input[name=username]").val(); var depart=$("input[name=depart]").val(); var signid=$("input[name=signid]").val(); var type=$("input[name=type]").val(); if(username.length<1){ alert("请填写姓名"); $(".bodybj").hide(); return false; } if(depart.length<1){ alert("请填写部分"); $(".bodybj").hide(); return false; } $.ajax({ type: "post", url: "/Mob/index/addsig", data: {img:img,username:username,signid:signid,type:type,depart:depart}, dataType: "json", success: function(data){ $(".bodybj").hide(); alert("签名成功！"); window.location.reload(); } }); }else{ $(".bodybj").hide(); alert("签名失败") } } }); }) </script> </body> </html>
可以借鉴：https://www.cnblogs.com/zhuyupingit/p/6650550.html
以上是关于jSignature做手动签名,canvas支持触摸屏的签名涂鸦插件的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jSignature.js在一个页面中显示多个签名？