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

最新推荐文章于 2024-03-03 20:26:20 发布

qianjiu

最新推荐文章于 2024-03-03 20:26:20 发布

阅读量2.5k

点赞数 5

分类专栏： DIV/CSS/JS 网页效果

原文链接：https://blog.csdn.net/qq445829096/article/details/108493372?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=1328761.12000.16172590961693731&depth_1-utm_source=distribute.pc

版权

DIV/CSS/JS 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

网页效果

7 篇文章 1 订阅

订阅专栏

直接上代码：

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

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

qianjiu

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
html5实现手写签名板，用于电子文档签名

直接上代码：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="icon" href
复制链接

扫一扫