HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
生活随笔
收集整理的這篇文章主要介紹了
HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
公司需求html5手寫簽名，并轉(zhuǎn)換成圖片上傳服務(wù)器
- 項(xiàng)目結(jié)構(gòu)：jquery+springboot項(xiàng)目需要引入js文件：jquery的jquery.min.js 、jSignature插件的 jSignature.min.js 、flashcanvas.js文件 小白注意：引入js的方式我是通過thymeleaf，不是該模板的請通過絕對路徑或者相對路徑等其他方式引入，其中ajax中的url路徑已置空，自行添加。
- 效果圖如下
- 前端HTML5部分代碼
- 后端接收數(shù)據(jù)部分代碼
鏈接: jSignature官方插件下載地址，下載后解壓找到lib文件導(dǎo)入到自己項(xiàng)目中去并引用即可.
項(xiàng)目結(jié)構(gòu)：jquery+springboot項(xiàng)目需要引入js文件：jquery的jquery.min.js 、jSignature插件的 jSignature.min.js 、flashcanvas.js文件 小白注意：引入js的方式我是通過thymeleaf，不是該模板的請通過絕對路徑或者相對路徑等其他方式引入，其中ajax中的url路徑已置空，自行添加。
關(guān)于為何不直接通過base64傳輸圖片？公司xss攔截代碼會(huì)攔截關(guān)鍵字，直接傳輸base64會(huì)被攔截，所有最終選擇使用ajax傳輸流文件上傳圖片
**
效果圖如下
**
前端HTML5部分代碼
<!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <meta charset="utf-8"> <meta name="context-path" th:content="@{/}"/> <style type="text/css">a{text-decoration:none;}a:hover{ text-decoration:none;}#box{width: 100%;height: 400px;border: 1px solid #eaeaea;}canvas{height: 400px !important;}.abspan{color: #ffffff;display: block;width: 100px;font-size: 16px;text-align: center;line-height: 40px;background: dodgerblue;margin-bottom: 10px;} </style><body> <div style="margin: 12px;"><div class="form-group"><label class="col-sm-3 control-label">本人姓名確認(rèn)</label><div class="col-sm-8"><div id="box"></div><span class="abspan" id="su">確認(rèn)</span><span class="abspan" id="re">重置</span><img src="" alt="" id="image"></div></div><div class="form-group"><div class="col-sm-8 col-sm-offset-3"><a id="save" class="btn btn-primary" οnclick="javascript:save()">提交</a>    </div></div></form></div> <script type="text/javascript"th:src="@{/js/jquery.min.js}"></script> <script type="text/javascript"th:src="@{/js/jSignature.min.js}"></script> <script type="text/javascript"th:src="@{/js/flashcanvas.js}"></script> <script>$(function() {$("#box").jSignature();//初始化畫板，初始化之后就可以進(jìn)行操作});function save() {//先將圖片保存到服務(wù)器，在把其他表單數(shù)據(jù)提交到服務(wù)器（具體如何關(guān)聯(lián)取決業(yè)務(wù)）saveImage();saveForm();}//點(diǎn)擊事件為獲取base64數(shù)據(jù)，生成圖片document.getElementById("su").onclick = function(){//getData:獲取數(shù)據(jù)//reset：復(fù)位/重置// 獲取簽名的“base64”數(shù)據(jù)對var datapair = $("#box").jSignature("getData","image");//此處打印的是完整的base64轉(zhuǎn)碼，可以復(fù)制后去在線轉(zhuǎn)碼測試一下是否正常console.log('data:' + datapair[0] + "," + datapair[1])//將圖片展示出來$("#image").attr('src','data:' + datapair[0] + "," + datapair[1]);}//生成圖片之后我們就可以進(jìn)行相應(yīng)的操作//點(diǎn)擊事件為重置畫板document.getElementById("re").onclick = function(){$("#box").jSignature("reset");$("#image").attr('src','');}var url='';//設(shè)置你們的url//保存整個(gè)表單在此之前已經(jīng)將圖片上傳到服務(wù)器了function saveForm(){$.ajax({cache : true,type : "POST",url : url,data : $('#form').serialize(), // 你的formidasync : false,error : function(request) {alert("網(wǎng)絡(luò)超時(shí)");},success : function(data) {console.log(data)}});}//重點(diǎn)來了，該方法將Base64格式轉(zhuǎn)換成流格式function base64toFile(dataurl, filename) {let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let suffix = mime.split('/')[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], `${filename}.${suffix}`, {type: mime})}function saveImage() {var url='';//設(shè)置你們的urlvar datapair = $("#box").jSignature("getData","image"); //將canvas里面的數(shù)據(jù)轉(zhuǎn)換成base64數(shù)組var imgBase64='data:' + datapair[0] + "," + datapair[1]; //封裝成正確的base64var file= base64toFile(imgBase64,'file'); //base64轉(zhuǎn)換成流文件，可以打印出來看下let formData = new FormData() //封裝成formData格式formData.append('type', 97);formData.append('file', file)$.ajax({contentType: false, //不可少processData: false, //不可少type : "POST",url : url,data : formData,async : false,error : function(request) {alert("網(wǎng)絡(luò)超時(shí)");},success : function(data) {console.log(data)}});} </script> </body> </html>后端接收數(shù)據(jù)部分代碼
//上傳文件并通過流的方式接收，我的業(yè)務(wù)做法是將文件上傳后拿到文件id及地址存儲(chǔ)到數(shù)據(jù)庫， //拿到流文件后如何上傳具體可以參考別的文章@PostMapping("/upLoadItemImage")@ResponseBodypublic String upLoadItemImage(HttpServletRequest request, Integer type) {MultipartHttpServletRequest fileRequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> fileMap = fileRequest.getFileMap();for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {MultipartFile file = entity.getValue();int id = 0;try {InputStream inputStream = file.getInputStream();//自行操作//...} catch (Exception e) {e.printStackTrace();}if(id == 0){return "error" ;}}return "ok";}總結(jié)
以上是生活随笔為你收集整理的HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win08R2变脸Win7第三招立户
- 下一篇： 公司注册资金到底多少才是最好