当前位置: 首页 > 工具软件 > jSignature > 使用案例 >

电子签名,手写板签名(js+layui+jSignature)

田丰
2023-12-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>电子签名</title>i+
    <style>
        html,body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #f2f2f2;
        }
        .main{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #signature{
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        .header{
            width: 50px;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            font-size: 16px;
            background-color: #273039;
            color: #fff;
            text-align: center;
            border: none
        }

        .footer{
            width: 50px;
            height: 100%;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            border-right: 2px solid #f2f2f2
        }
        .size{
            position: absolute;
            top: 5%;
        }
        .size div{
            margin-top: 20px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;

            text-align: center;
            background: #00a0e9
        }
        .size-one{
            width: 14px;
            height: 14px;
            line-height: 14px;
            margin-left: 14px;
        }
        .size-two{
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-left: 12px;
        }
        .size-three{
            width: 22px;
            height: 22px;
            line-height: 22px;
            margin-left: 10px;
        }
        .btns{
            width: 22px;
            height: 22px;
            line-height: 22px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
        }
        .btn{
            position: absolute;
            top: 40%;
        }
        .btn button{
            margin-bottom: 30px;
        }
        .btn-cx{
            width: 50px !important;
            height: 22px;
            line-height: 22px;
            border: 2px solid #f2f2f2;
            border-radius: 50%;
            margin-left: 10px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #00a0e9;
            border-radius: 5px;
            bottom: 10px;
            right: 0 !important;
            outline: none;
        }
        .btn .btn-cxx{
            background-color: #fff;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #00a0e9;
            border-radius: 5px;
            bottom: 10px;
            right: 0 !important;
            outline: none;
        }
        .btn .btn-bc{
            background-color: #00a0e9;
            border: 1px solid #00a0e9;
            line-height: 22px;
            color: #fff;
            border-radius: 5px;
            outline: none;
        }
        .color{
            position: absolute;
            bottom: 5%;
        }
        .color div{
            margin-bottom: 20px;
        }

        .trans{
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);
            -moz-transform:rotate(90deg);
            -webkit-transform:rotate(90deg); 
            -o-transform:rotate(90deg);
        }
        .size-this,.color-this{
            border: 2px solid #3FDB99 !important;
        }

    </style>
    <!--映入js文件-->
    <script src="/static/lib/jSignature-2.1.3/libs/jquery.js"></script>
    <script src="/static/lib/jSignature-2.1.3/src/jSignature.js"></script>
    <script src="/static/lib/jSignature-2.1.3/libs/jSignature.min.noconflict.js"></script>
    <script src="/static/admin/lib/layer/layer-3.1/layer.js"></script>
</head>
<body>

<div class="main">
    <div class="content" id="signature"></div>
    <div class="footer">
        <div class="size">
            <div class="size-one size-this" data-line="2"></div>
            <div class="size-two " data-line="4"></div>
            <div class="size-three" data-line="8"></div>
        </div>
        <div class="btn">
            <button class="btn-cxx trans">清&nbsp;空</button>
            <button class="btn-bc trans">保&nbsp;存</button>

        </div>
        <div class="color" style="display: none">
            <div class="btns color-this" style="background: #273039;" data-color="#273039"></div>
        </div>
    </div>
</div>
</body>
<script>
    var url = '控制器路径';

    function jSignatures(color='#273039',lineWidth=3){
        $("#signature").html('')
        $("#signature").jSignature({color:color,lineWidth:lineWidth,width:'100%',height:'100%',UndoButton:false});
    }
    jSignatures();


    //清空
    $('.btn-cxx').on('click',function(){
        $("#signature").jSignature('clear');
    });


    //点击大小
    $('.size div').on('click',function(){
        $('.size-this').removeClass('size-this')
        $(this).addClass('size-this')
        var lineWidth = $(this).data('line');
        var color = $('.color-this').data('color')
        jSignatures(color,lineWidth);
    });
    var type = 1;

    //保存图片
    $('.btn-bc').on('click',function(){
        var data = $("#signature").jSignature('getData','image');
        $.post(url+'saveBase64',{data:data,type:'landscape'},function (res) {
            layer.closeAll('loading');
            if(res.code==0){
                setTimeout(function () {
                    if(type==1){
                        layer.msg(res.msg)
                        setTimeout(function () {
                            location.href = url+'index'
                        },1000)
                    }else{
                        location.href = '签名转换成图片后跳转展示地址';
                    }
                },800)
            }else{
                layer.msg(res.msg);
            }
        },'json')
    });

</script>
</html>
 类似资料: