公司需求html5手写签名，并转换成图片上传服务器

项目结构：jquery+springboot项目需要引入js文件：jquery的jquery.min.js 、jSignature插件的 jSignature.min.js 、flashcanvas.js文件小白注意：引入js的方式我是通过thymeleaf，不是该模板的请通过绝对路径或者相对路径等其他方式引入，其中ajax中的url路径已置空，自行添加。
- 效果图如下
- 前端HTML5部分代码
- 后端接收数据部分代码

链接: jSignature官方插件下载地址，下载后解压找到lib文件导入到自己项目中去并引用即可.

项目结构：jquery+springboot项目需要引入js文件：jquery的jquery.min.js 、jSignature插件的 jSignature.min.js 、flashcanvas.js文件小白注意：引入js的方式我是通过thymeleaf，不是该模板的请通过绝对路径或者相对路径等其他方式引入，其中ajax中的url路径已置空，自行添加。

关于为何不直接通过base64传输图片？公司xss拦截代码会拦截关键字，直接传输base64会被拦截，所有最终选择使用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">本人姓名确认</label><div class="col-sm-8"><div id="box"></div><span class="abspan" id="su">确认</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> &emsp;&emsp;&emsp;</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();//初始化画板，初始化之后就可以进行操作});function save() {//先将图片保存到服务器，在把其他表单数据提交到服务器（具体如何关联取决业务）saveImage();saveForm();}//点击事件为获取base64数据，生成图片document.getElementById("su").onclick = function(){//getData:获取数据//reset：复位/重置// 获取签名的“base64”数据对var datapair = $("#box").jSignature("getData","image");//此处打印的是完整的base64转码，可以复制后去在线转码测试一下是否正常console.log('data:' + datapair[0] + "," + datapair[1])//将图片展示出来$("#image").attr('src','data:' + datapair[0] + "," + datapair[1]);}//生成图片之后我们就可以进行相应的操作//点击事件为重置画板document.getElementById("re").onclick = function(){$("#box").jSignature("reset");$("#image").attr('src','');}var url='';//设置你们的url//保存整个表单在此之前已经将图片上传到服务器了function saveForm(){$.ajax({cache : true,type : "POST",url : url,data : $('#form').serialize(), // 你的formidasync : false,error : function(request) {alert("网络超时");},success : function(data) {console.log(data)}});}//重点来了，该方法将Base64格式转换成流格式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='';//设置你们的urlvar datapair = $("#box").jSignature("getData","image");  //将canvas里面的数据转换成base64数组var imgBase64='data:' + datapair[0] + "," + datapair[1];  //封装成正确的base64var file= base64toFile(imgBase64,'file');     //base64转换成流文件，可以打印出来看下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("网络超时");},success : function(data) {console.log(data)}});}
</script>
</body>
</html>

后端接收数据部分代码

//上传文件并通过流的方式接收，我的业务做法是将文件上传后拿到文件id及地址存储到数据库，
//拿到流文件后如何上传具体可以参考别的文章@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";}

HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能相关推荐

HTML5+jSignature插件手写签名生成图片并转换成文件流实现服务器上传功能
简介项目结构:html+vue+springboot html引入VUE项目vue.min.js.jQuery的jquery-3.4.1.min.js,签名:modernizr.js.jSignat ...
微信 html5 识别手写签名,html5 canvas做手写签名,该如何解决
html5 canvas做手写签名我用HTML5做了一个手写签名,运行在手机浏览器上,但是画出来效果总是很粗糙,曲线不够平滑,想找大侠指教 HTML> PhoneGap 浏览器不支持canva ...
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
对于手写签名生成图片储存和回显的实现
首先感谢网络上分享的文章:http://www.benhailong.com/index.php js+css的demo下载地址:点击这里把下载的文件引入到自己的项目中,对应修改js和css的路径. ...
iOS手写签名生成图片贝赛尔曲线
最近公司业务有一个需求,用户认证时需要手动签名,客户端需要将用户的签名生成图片上传给服务器.于是利用贝赛尔曲线研究了一下手动签名,和大家分享一下. Demo下载地址:https://github.co ...
Android通过webview实现手写签名生成图片并上传服务器
MainActivity 签名页面 package com.sign.webview;import android.app.Activity; import android.content.Inten ...
微信小程序 - DZMDrawingBoard - (Canvas封装的画板、手写签名、生成图片、保存相册...库)
一.简介在微信小程序开发中,有时候需要手写签名生成图片上传服务器.制作一个手绘板.画板并支持保存图片等,然后就封装了一下:DZMDrawingBoard. DZMDrawingBoard 通过 Ca ...
在app端手写签名并保存下来（以文件形式或者是base64编码）
最近做的项目有个需求,在app端手写签名的并保存为文件或者base64编码.所以就刚好有时间写了一下并记录下来: 先上效果图: 分析思路:因为这里是要获取手势轨迹并画出来,所以肯定是有个Touch事件 ...
web 前端签名插件_手写签名插件—jSignature
jSignature 是一个通过捕捉笔画的矢量轮廓输出多种格式数据的jQuery插件,通过该插件我们可以实现绘画板.手写签名等功能. 使用该插件需要引入 jQuery 和jSignature.js,首 ...

HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能

公司需求html5手写签名，并转换成图片上传服务器

效果图如下

前端HTML5部分代码

后端接收数据部分代码

HTML5+jSignature插件手写签名生成图片并转换成文件流实现功能相关推荐

最新文章

热门文章