前端实现电子签名

码农遇见菜鸟
已于 2023-02-25 15:46:02 修改
阅读量399
点赞数
文章标签：前端 css html
于 2023-02-25 15:41:02 首次发布
本文链接：https://blog.csdn.net/weixin_40597855/article/details/129215441
版权
前端实现电子签名
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title></title>
<style>
    .containers{
        width:100%;
        max-width: 550px;
        margin: 0 auto;
        /*padding:10px 2% 10% 2%;*/
        /*height:750px;*/
        position: relative;
        background: #fff;
        padding-bottom:60px;
    }
    .containers .title{
        color: #333;
        font-size:2em;
        font-weight: normal;
        margin-bottom:3%;
        text-align: center;
    }
    .contract_con,.flowcard_contract,.contractid{
        line-height:22px;
        font-size: 13px;
    }
    .contract p,.flowcard_contract p{
        text-indent: 2em;
        margin: 0;
    }
    .lines{
        letter-spacing: 0.1em;
        /*width: 100px;*/
        display: inline-block;
        border-bottom: 1px solid #333;
        height: 20px;
        line-height: 21px;
        padding: 0 10px;
        text-indent: 0em;
    }
    .one{
        margin-bottom: 10px;
    }
    .standard{
        width: 130px;
        height: 130px;
        position: absolute;
        bottom: -35px;
        left: 17px;
    }
    .content{
        padding: 0;
    }
    .footer{
      margin:30px 10px;
      display: flex;
      justify-content: space-between;
   }
   .footer .imgs{
        width: 70px;
        height: 70px;
        margin-left: 15px;
        margin-top: -14px;
   }
   .signimg{
     width:40px;
   }
   .row{
     margin: 0;
   }
   .col-xs-12{
     padding: 0;
   }
   .layui-layer-content{
        text-align:center;
   }
   .signcontent{
        height:100%;
        width: 100%;
   }
   .signbtn,.btns{
       padding: 8px 50px;
       font-size: 16px;
       letter-spacing: 0.1em;
       text-indent: 0.1em;
   }
   .center{
     text-align: center;
   }
   .closebtn{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        font-size: 16px;
        position: absolute;
        right: 10px;
        top: 120px;
        border: 1px solid #ddd;
        background: rgba(0,0,0,0.6);
        color: #fff;
        line-height: 22px;
   }
   
</style>
</head>
<body>
<div class="container">
      <div style="margin-top:30px;text-align: center;">
        <span href="javascript:;" class="btn btn-sm btn-info signbtn">签名</span>
    </div>
    <div class="signcontent">
        <div align="center" style="margin:0 auto;background: #fff;padding:50px 0;">
            <p style="font-size:16px;margin:10px;font-weight: bold;">电子签名</p>
            <canvas id="myCanvas" width="300" height="300" style="border:1px solid #6699cc;border-radius:10px;"></canvas>
            <div class="control-ops control" style="margin-top:10px;">
                <button type="button" class="btn btn-primary btns" onclick="javascript:clearArea();return false;">清空</button>
                <button type="submit" class="btn btn-success saveimg btns" onclick="javascript:saveImageInfo();return false;" style="margin-left:50px;">确定</button>
            </div>
            <div class="saveimgs"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../assets/libs/jquery/dist/jquery.min.js?v=1566358456"></script>
<script type="text/javascript">
    var mousePressed = false;var inputsign=false;
    var lastX, lastY;
    var ctx = document.getElementById('myCanvas').getContext("2d");
    var c = document.getElementById("myCanvas");

    var control = document.getElementsByClassName("control")[0];
    var saveimgs = document.getElementsByClassName("saveimgs")[0];

    window.onload = function() {
        InitThis();
    }
    // 电子签名保存的图片
    function saveImageInfo() {
        var image = c.toDataURL("image/png");
        console.log(image)
    }
    function InitThis() {
        //触摸屏
        c.addEventListener('touchstart', function(event) {
            inputsign=true;
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，重要
                var touch = event.targetTouches[0];
                mousePressed = true;
                Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, false);
            }

        }, false);
        c.addEventListener('touchmove', function(event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，重要
                var touch = event.targetTouches[0];
                if (mousePressed) {
                    Draw(touch.pageX - this.offsetLeft, touch.pageY - this.offsetTop, true);
                }
            }

        }, false);

        c.addEventListener('touchend', function(event) {
            if (event.targetTouches.length == 1) {
                event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
                //                  var touch = event.targetTouches[0];
                mousePressed = false;
            }
        }, false);

        //         鼠标
        c.onmousedown = function(event) {
            mousePressed = true;
            Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, false);
        };
        c.onmousemove = function(event) {
            if (mousePressed) {
                Draw(event.pageX - this.offsetLeft, event.pageY - this.offsetTop, true);
            }
        };
        c.onmouseup = function(event) {
            mousePressed = false;
        };
    }
    function Draw(x, y, isDown) {
        if (isDown) {
            ctx.beginPath();
            ctx.strokeStyle = 'black';
            ctx.lineWidth =5;
            ctx.lineJoin = "round";
            ctx.moveTo(lastX, lastY);
            ctx.lineTo(x, y);
            ctx.closePath();
            ctx.stroke();
        }
        lastX = x;
        lastY = y;
    }

    function clearArea() {
        // Use the identity matrix while clearing the canvas
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        // 清除签名图片
        if (saveimgs.getElementsByTagName('span').length >= 1) {
            var clearImg = saveimgs.getElementsByTagName('span')[0];
            saveimgs.removeChild(clearImg);
        }
    }
</script>