html5实现手写签名板，用于电子文档签名

最新推荐文章于 2024-06-11 00:11:31 发布

影子2401

最新推荐文章于 2024-06-11 00:11:31 发布

阅读量5.7k

点赞数 4

分类专栏：软件文章标签： H5签名电子签名

本文链接：https://blog.csdn.net/qq445829096/article/details/108493372

版权

软件专栏收录该内容

63 篇文章 0 订阅

订阅专栏

html5实现手写签名板，点击保存签名，读取画布base64编码，转为二进制保存到数据库(直接保存base64字符串到数据库也行，我这边由于业务场景存储二进制方便其他项目组使用)，用于电子文档签名

效果如下

html代码，直接使用H5自带的canvas，无需引入js

<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="yiyuan.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="yiyuan.ico" type="image/x-icon"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>电子签名</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .canvas {
        /*width: 100%;*/
        display: block;
        border: 1px solid red;
    }
    #clear {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 20px auto;
        cursor: pointer;
    }

    #save {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 20px auto;
        cursor: pointer;

    }
</style>
<input type="hidden" id="tjbh" value="${tjbh}">
<input type="hidden" id="signType" value="${signType}">
<body data-ext-version="1.4.2">
<div style="text-align: center">
<canvas id="canvas" width="400" height="200" style="border:1px solid #000000;">
    您的浏览器不支持canvas技术,请升级浏览器!
</canvas>
<div>
    <span id="clear">清空签名板</span>
    <span id="save">保存签名</span>
</div>
</div>
</body>
<script type="text/javascript">
    function WriteFont(id, options) {
        var self = this;
        this.canvas = document.getElementById(id);
        var obj = {
            canvas: this.canvas,
            context: this.canvas.getContext("2d"),
            isWrite: false, //是否开始
            lastWriteTime: -1,
            lastWriteSpeed: 0,
            lastWriteWidth: 0,
            canvasWidth: 400, //canvas宽高
            canvasHeight: 200,
            isShowBorder: true, //是否显示网格
            bgColor: '#fff', //背景色
            borderWidth: 2, // 网格线宽度
            borderColor: "#fff", //网格颜色
            lastPoint: {}, //
            writeWidth: 2, //基础轨迹宽度
            maxWriteWidth: 30, // 写字模式最大线宽
            minWriteWidth: 1, // 写字模式最小线宽
            writeColor: '#000', // 轨迹颜色
            isWriteName:false //签名模式
        }

        for(var name in options) {
            obj[name] = options[name];
        }

        /**
         * 轨迹宽度
         */
        this.setLineWidth = function() {
            var nowTime = new Date().getTime();
            var diffTime = nowTime - obj.lastWriteTime;
            obj.lastWriteTime = nowTime;
            var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
            if(returnNum < obj.minWriteWidth) {
                returnNum = obj.minWriteWidth;
            } else if(returnNum > obj.maxWriteWidth) {
                returnNum = obj.maxWriteWidth;
            }

            returnNum = returnNum.toFixed(2);
//写字模式和签名模式
            if(obj.isWriteName){
                obj.context.lineWidth = obj.writeWidth;
            }else{
                obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
            }
        }

        /**
         * 绘制轨迹
         */
        this.writing = function(point) {
            obj.context.beginPath();
            obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
            obj.context.lineTo(point.x, point.y);
            self.setLineWidth();
            obj.context.stroke();
            obj.lastPoint = point;
            obj.context.closePath();
        }

        /**
         * 轨迹样式
         */
        this.writeContextStyle = function() {
            obj.context.beginPath();
            obj.context.strokeStyle = obj.writeColor;
            obj.context.lineCap = 'round';
            obj.context.lineJoin = "round";
        }

        /**
         * 写开始
         */
        this.writeBegin = function(point) {
            obj.isWrite = true;
            obj.lastWriteTime = new Date().getTime();
            obj.lastPoint = point;
            self.writeContextStyle();
        }

        /**
         * 写结束
         */
        this.writeEnd = function() {
            obj.isWrite = false;
        }

        /**
         * 清空画板
         */
        this.canvasClear = function() {
            obj.context.save();
            obj.context.strokeStyle = '#fff';
            obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
            if(obj.isShowBorder && !obj.isWriteName) {
                obj.context.beginPath();
                var size = obj.borderWidth / 2;
//画外面的框
                obj.context.moveTo(size, size);
                obj.context.lineTo(obj.canvasWidth - size, size);
                obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
                obj.context.lineTo(size, obj.canvasHeight - size);
                obj.context.closePath();
                obj.context.lineWidth = obj.borderWidth;
                obj.context.strokeStyle = obj.borderColor;
                obj.context.stroke();
//画里面的框
                obj.context.moveTo(0, 0);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, 0);
                obj.context.lineTo(obj.canvasWidth / 2, 0);
                obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
                obj.context.stroke();

            }
            obj.context.restore();
        }

        /**
         * 保存图片 格式base64
         */
        this.saveAsImg = function() {
            var image = new Image();
            image.src = this.canvas.toDataURL("image/png");
            if(image.src == this.emptyCanvas) {
                alert('请先签名')
                return;
            }
            if(!confirm("你确定提交当前的签名吗?")){
                console.log("你确定提交当前的签名吗?-->NO");
                return;
            }
            var base64Image=image.src;
            console.log('提交的内容===>', image.src)
            var params={
                "tjbh":jQuery("#tjbh").val(),
                "signType":jQuery("#signType").val(),
                "picture":base64Image
            }
            jQuery.ajax({
                url:"autoGraphAction_index_submitSign.do",
                type:"post",
                data:params,
                dataType:"json",
                success:function(data){
                    //alert("data:"+JSON.stringify(data))
                    if(data.code!=200){
                      alert(data.message);
                      return;
                    }
                    alert(data.message);
                },
                error:function(data,textStatus){
                    alert("网络连接错误，请稍后再试!");

                }
            });

        };

        /**
         * 初始化画板
         */
        this.canvasInit = function() {
            this.canvas.width = obj.canvasWidth;
            this.canvas.height = obj.canvasHeight;
            this.emptyCanvas = this.canvas.toDataURL("image/png");
        }

        /**======================事件绑定===========================**/

        this.canvas.addEventListener('mousedown', function(e) {
            var point = {
                x: e.offsetX || e.clientX,
                y: e.offsetY || e.clientY
            };
            self.writeBegin(point);
        });

        this.canvas.addEventListener('mouseup', function(e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });

        this.canvas.addEventListener('mouseleave', function(e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });

        this.canvas.addEventListener('mousemove', function(e) {
            if(obj.isWrite) {
                var point = {
                    x: e.offsetX,
                    y: e.offsetY
                };

                self.writing(point);
            }
        });

//移动端
        this.canvas.addEventListener('touchstart', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX || touch.clientX,
                y: touch.pageY || touch.clientY
            };
            self.writeBegin(point);
        });
        this.canvas.addEventListener('touchend', function(e) {
            var touch = e.changedTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('touchmove', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('touchmove', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writing(point);
        });

        this.canvasInit();
        this.canvasClear();

        this.option = obj;
        obj.control = {
            clearCanvas: self.canvasClear
        };
    }

    /**
     * 初始化调用
     * 设置参数
     */
    var writeCanvas = new WriteFont('canvas', {
        borderWidth: 10,
        writeWidth:3,
        borderColor: '#ff6666',
        isWriteName:true //签名模式
    });

    document.getElementById('clear').onclick = function() {
        writeCanvas.option.control.clearCanvas();
    };

    document.getElementById('save').onclick = function() {
        writeCanvas.saveAsImg()
    };
</script>
</html>

后台存储到数据库代码

 public  void submitSign(Map<String,Object> module, String tjbh, String signType, String pictrue) throws Exception{
        Session session=null;
        Connection conn=null;
        PreparedStatement ps=null;
        try{
            session=sessionFactory.openSession();
            conn=session.connection();

            String base64Str=pictrue.replace("data:image/png;base64,","");
           // System.out.println("base64Str:"+base64Str);

            BASE64Decoder decoder = new sun.misc.BASE64Decoder();
            byte[] byte_1= decoder.decodeBuffer(base64Str);
            String deleteSql="delete from TJ_SIGN_PHOTO   where TJBH=? and  SIGNTYPE=?   ";
            session.createSQLQuery(deleteSql).setParameter(0,tjbh).setParameter(1,signType).executeUpdate();

            SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

            String insertSql="insert into TJ_SIGN_PHOTO(TJBH,SIGNTYPE,OPDATE,PICTURE)VALUES(?,?,?,?)";
            ps=conn.prepareStatement(insertSql);
            ps.setString(1,tjbh);
            ps.setString(2,signType);
            ps.setString(3,sdf.format(new Date()));
            ps.setBytes(4,byte_1);
            ps.execute();

            module.put("code","200");
            module.put("message","操作成功!");
        }finally {
            if(ps!=null){
                try {
                ps.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(conn!=null){
                try {
                    conn.close();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            if(session!=null){
                session.close();
            }
        }
    }