JS如何实现电子签名

置顶栗子仙

已于 2022-03-09 13:15:24 修改

阅读量1.3w

点赞数 6

分类专栏：项目经验文章标签： javascript css html5 css3 java

于 2020-06-10 13:38:44 首次发布

本文链接：https://blog.csdn.net/qq_41060065/article/details/106662321

版权

项目经验专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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.把服务器的路径存到数据库中
这里就不演示了，就是走个方法把路径存到数据库中。

效果展示
画板
在这里插入图片描述

抱歉字有点丑将就看

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

栗子仙

关注

6
点赞
踩
33

收藏

觉得还不错? 一键收藏
4
评论
JS如何实现电子签名

这里写自定义目录标题JS实现电子签名JS实现电子签名最近在做一个在线考核的项目，其中有一个需求是考核完毕后在录入成绩时需要进行签名，签名后要在表单显示出来并且进行成绩单的打印其实思路已经很明显了。1.第一步先生成画板2.第二步在画板中进行签名写字3.第三步点击提交上传图片（base64编码）到服务器4.第四步服务器接收后转码转成图片（png/img）后，先存到本地静态资源服务器5.把地址信息存到数据库中思路大概就是这个思路，有个细节就是在转码转成图片时，如果转成img格式的那么背景就会是黑
复制链接

扫一扫