整理的前面可以用的：
<!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支持触摸屏的签名涂鸦插件
原文地址：https://www.cnblogs.com/xqschool/p/8622539.html