当前位置：首页 > article >正文

html电子签名

article 2024/11/13 10:01:08

html电子签名

html5实现手写签名板，点击保存即可生成base64格式的图片

使用H5自带的canvas，无需引入js无需引入别的js

效果图

html代码

<!DOCTYPE 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)

        };

        /**
         * 初始化画板
         */
        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>