jquery实现签名功能

a.html

引入jQuery.js

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>健康生活</title>
  7     <meta name="viewport"
  8         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  9 </head>
 10 <style type="text/css">
 11     a {
 12         text-decoration: none;
 13     }
 14 
 15     a:hover {
 16         text-decoration: none;
 17     }
 18 
 19     #box {
 20         width: 100%;
 21         height: 400px;
 22         border: 1px solid #eaeaea;
 23     }
 24 
 25     canvas {
 26         height: 400px !important;
 27     }
 28 
 29     .abspan {
 30         color: #ffffff;
 31         display: block;
 32         width: 100px;
 33         font-size: 16px;
 34         text-align: center;
 35         line-height: 40px;
 36         background: dodgerblue;
 37         margin-bottom: 10px;
 38     }
 39 </style>
 40 
 41 
 42 <body>
 43     <div style="margin: 12px;">
 44         <div class="form-group">
 45             <label class="col-sm-3 control-label">本人姓名确认</label>
 46             <div class="col-sm-8">
 47                 <div id="box">
 48                 </div>
 49                 <span class="abspan" id="su">确认</span>
 50                 <span class="abspan" id="re">重置</span>
 51                 <img src="" alt="" id="image">
 52             </div>
 53         </div>
 54         <div class="form-group">
 55             <div class="col-sm-8 col-sm-offset-3">
 56                 <a id="save" class="btn btn-primary" οnclick="javascript:save()">提交</a> &emsp;&emsp;&emsp;
 57             </div>
 58         </div>
 59         </form>
 60 
 61     </div>
 62 
 63 </body>
 64 <script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
 65 <script src="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/flashcanvas.js"></script>
 66 <script src="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>
 67 <script>
 68     $(function () {
 69         $("#box").jSignature(); //初始化画板，初始化之后就可以进行操作
 70     });
 71 
 72     function save() {
 73         //先将图片保存到服务器，在把其他表单数据提交到服务器（具体如何关联取决业务）
 74         saveImage();
 75         saveForm();
 76     }
 77     //点击事件为获取base64数据，生成图片
 78     document.getElementById("su").onclick = function () {
 79         //getData:获取数据
 80         //reset：复位/重置
 81         // 获取签名的“base64”数据对
 82         var datapair = $("#box").jSignature("getData", "image");
 83         //此处打印的是完整的base64转码，可以复制后去在线转码测试一下是否正常
 84         console.log('data:' + datapair[0] + "," + datapair[1])
 85         //将图片展示出来
 86         $("#image").attr('src', 'data:' + datapair[0] + "," + datapair[1]);
 87     }
 88     //生成图片之后我们就可以进行相应的操作
 89 
 90     //点击事件为重置画板
 91     document.getElementById("re").onclick = function () {
 92         $("#box").jSignature("reset");
 93         $("#image").attr('src', '');
 94     }
 95     var url = ''; //设置你们的url
 96     //保存整个表单在此之前已经将图片上传到服务器了
 97     function saveForm() {
 98         $.ajax({
 99             cache: true,
100             type: "POST",
101             url: url,
102             data: $('#form').serialize(), // 你的formid
103             async: false,
104             error: function (request) {
105                 alert("网络超时");
106             },
107             success: function (data) {
108                 console.log(data)
109             }
110         });
111     }
112     //重点来了，该方法将Base64格式转换成流格式
113     function base64toFile(dataurl, filename) {
114         let arr = dataurl.split(',')
115         let mime = arr[0].match(/:(.*?);/)[1]
116         let suffix = mime.split('/')[1]
117         let bstr = atob(arr[1])
118         let n = bstr.length
119         let u8arr = new Uint8Array(n)
120         while (n--) {
121             u8arr[n] = bstr.charCodeAt(n)
122         }
123         return new File([u8arr], `${filename}.${suffix}`, {
124             type: mime
125         })
126     }
127 
128     function saveImage() {
129         var url = ''; //设置你们的url
130         var datapair = $("#box").jSignature("getData", "image"); //将canvas里面的数据转换成base64数组
131         var imgBase64 = 'data:' + datapair[0] + "," + datapair[1]; //封装成正确的base64
132         var file = base64toFile(imgBase64, 'file'); //base64转换成流文件，可以打印出来看下
133         let formData = new FormData() //封装成formData格式
134         formData.append('type', 97);
135         formData.append('file', file)
136         $.ajax({
137             contentType: false, //不可少
138             processData: false, //不可少
139             type: "POST",
140             url: url,
141             data: formData,
142             async: false,
143             error: function (request) {
144                 alert("网络超时");
145             },
146             success: function (data) {
147                 console.log(data)
148             }
149         });
150     }
151 </script>
152 
153 </html>
文件地址链接：https://gitee.com/devil_mask/j-query-signature

原文地址：https://www.cnblogs.com/langmohua/p/15078976.html