电子签名，手写板签名(js+layui+jSignature)
田丰
<!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">清 空</button>
<button class="btn-bc trans">保 存</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>
类似资料：