JS实现电子签名

最近在做一个在线考核的项目，其中有一个需求是考核完毕后在录入成绩时需要进行签名，签名后要在表单显示出来并且进行成绩单的打印
其实思路已经很明显了。

1.第一步先生成画板
2.第二步在画板中进行签名写字
3.第三步点击提交上传图片（base64编码）到服务器
4.第四步服务器接收后转码转成图片（png/img）后，先存到本地静态资源服务器
5.把地址信息存到数据库中

思路大概就是这个思路，有个细节就是在转码转成图片时，如果转成img格式的那么背景就会是黑色的，像这样

达不到电子签名的效果，所以要转成png格式的图片
那么直接开始吧，不墨迹直接放代码
1.生成画板，签名写字，上传图片
drawing.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>电子画板</title><link href="css/drawing/mui.min.css" rel="stylesheet" /><script type="text/javascript" src="css/drawing/mui.min.js"></script><script type="text/javascript" src="css/drawing/jquery.min.js"></script><script type="text/javascript" src="css/drawing/jSignature.min.js"></script><!--[if lt IE 9]><script type="text/javascript" src="css/drawing/flashcanvas.js"></script><![endif]-->
</head>
<body>
<h3>请在下方签名</h3>
<div id="signature" style="height: 100%;"></div>
<br>
<input id="clear" type="button" value="清除">
<input id="export" type="button" value="输出图片">
<input id="save" type="button" value="上传图片">
<div id="pic">
</div>
<p id="base" style="width:100%;"></p>
<script type="text/javascript"  src="js/drawing.js" charset="utf-8"></script>
</body>
</html>

drawing.js

    mui.plusReady(function() {plus.screen.lockOrientation('landscape-secondary');});$(document).ready(function() {$("#signature").jSignature()});document.getElementById("clear").addEventListener('tap', function() {$("#signature").jSignature("reset");$("#pic")[0].innerHTML = '';});document.getElementById("save").addEventListener('tap', function() {var datapair = $("#signature").jSignature("getData", "image");var array = datapair.splice(",");$.ajax({url: "/Login/ceshi",//接口方法type: "POST",data: {pp:array[1]},success: function (data) {console.log(data);}});console.log(array[1])mui.toast(array[1]);});document.getElementById("export").addEventListener('tap', function() {var datapair = $("#signature").jSignature("getData", "image");i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];console.log(i)// dataURLtoFile(i.src,"我是是")$(i).appendTo($("#pic"));});

需要的css、js文件
mui.min.css
mui.min.js
jquery.min.js
jSignature.min.js
css/drawing/flashcanvas.js
文件下载地址：下载地址(如果未找到，说明审核未过，加我qq技术交流群：1031848061(里面有))
2.服务器接收base64编码进行转译转译后存到本地服务器

 @PostMapping("/ceshi")public int ceshi(FailPojo failPojo) {BufferedImage image = null;byte[] imageByte = null;try {imageByte = DatatypeConverter.parseBase64Binary(failPojo.getPp());ByteArrayInputStream bis = new ByteArrayInputStream(imageByte);image = ImageIO.read(new ByteArrayInputStream(imageByte));bis.close();String name=System.currentTimeMillis()+new Random().nextInt(999999)+".png";String fileName = studentService.serviceloc().get("computername")+name;File outputfile = new File(fileName);ImageIO.write(image, "png", outputfile);} catch (IOException e) {e.printStackTrace();}return 0;}

3.把服务器的路径存到数据库中
这里就不演示了，就是走个方法把路径存到数据库中。

效果展示
画板

抱歉字有点丑将就看

存到了我本地服务器中。
最后把文件的服务器地址放到特定的成绩单中就实现了电子签名功能！

JS如何实现电子签名相关推荐

通过js进行在线PDF电子签名和小编辑
html加js实现电子签名 C#将PDF文件放在html页面进行修改并保存我们公司最近给了个新需求,研发的图纸跟着单子一起审核,并在图纸PDF上进行签名,走线上流程.这就需要在线编辑PDF了,网上有 ...
jq 使用jSignature.js实现电子签名
pc或者移动端都可用 <div class="container"><div id="signatureparent"><div ...
js实现移动端电子签名
apicloud项目需要实现用户的电子签名入库功能,网上各种搜索后终于找到答案 http://www.htmleaf.com/html5/html5-canvas/201505281921.html
webcrypto库下载_使用WebCrypto API的电子签名
webcrypto库下载有时我们需要让用户进行电子签名. 通常,人们会理解为以某种方式将您的手写签名放置在屏幕上. 根据管辖范围,可能很好,或者仅存储图像可能还不够. 例如,在欧洲,有910/201 ...
使用WebCrypto API的电子签名
有时我们需要让用户进行电子签名. 通常,人们会理解为将您的手写签名以某种方式放在屏幕上. 根据管辖范围,可能很好,或者仅存储图像可能还不够. 例如,在欧洲,有910/2014号法规 ,该法规定义了什么 ...
app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
(给前端大全加星标,提升前端技能) 转自:coyota666 https://juejin.cn/post/6901273585428463624 前言电子签名通俗来说就是通过技术手段实现在电子文档 ...
Jquery电子签名制作_jSignature
今天用Jquery的jSignature库制作一个电子签名后台.net core上传到指定文件夹下载jquery库提取码:rd9g html @{Layout = null; }<!DOC ...
h5 使用canvas实现电子签名和图片的保存
公司的业务表格登记需要使用上签名,所以做了一个电子签名的模块,网上看了很多相关资料,我选择使用jq 里面带有的签名功能,使用jq-signature.js来实现. 1.将jQuery和jq-signa ...
微信小程序手写签名_微信小程序实现电子签名功能
本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 // XXXX.wxml bindtouchmove="canvasMove" bindtouche ...

JS如何实现电子签名

JS实现电子签名

JS如何实现电子签名相关推荐

最新文章

热门文章