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>