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>    
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>