parent
4aa3ba9d3b
commit
d7aa1487cf
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../../component/pear/css/pear.css" />
|
||||
<style>
|
||||
.box {
|
||||
width: 430px;
|
||||
height: 210px;
|
||||
border: 1px solid #D1D1D1;
|
||||
border-radius: 10px;
|
||||
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
margin: 10px;
|
||||
|
||||
}
|
||||
|
||||
.signature {
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
/* margin-bottom: 50px; */
|
||||
border-bottom: 2px solid #999999;
|
||||
}
|
||||
|
||||
.memo {
|
||||
width: 400px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="box">
|
||||
<div class="signature" id="signature"></div>
|
||||
<div class="memo">请在上方进行手写签名</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottom">
|
||||
<div class="button-container">
|
||||
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" id="save">
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
签名确认
|
||||
</button>
|
||||
|
||||
<button type="submit" class="pear-btn pear-border pear-btn-sm" lay-submit="" lay-filter="clear">
|
||||
<i class="layui-icon layui-icon-fonts-clear"></i>
|
||||
重新签名
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../component/layui/layui.js"></script>
|
||||
<script src="../../../component/pear/pear.js"></script>
|
||||
<script src="../../../admin/js/jquery-3.6.0.min.js"></script>
|
||||
<script src="../../../component/jSignature/jSignature.min.js"></script>
|
||||
|
||||
<script>
|
||||
layui.use(['form'], function () {
|
||||
|
||||
var form = layui.form;
|
||||
|
||||
var param = {
|
||||
width: '400px', //签名区域的宽
|
||||
height: '150px', //签名区域的高
|
||||
UndoButton: false, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找
|
||||
signatureLine: false, //去除默认画布上那条横线
|
||||
lineWidth: '5' //画笔的大小
|
||||
};
|
||||
$("#signature").jSignature(param);
|
||||
|
||||
|
||||
form.on('submit(clear)', function (data) {
|
||||
$("#signature").jSignature("reset");
|
||||
});
|
||||
|
||||
|
||||
|
||||
//提交
|
||||
$('#save').click(function () {
|
||||
|
||||
if ($("#signature").jSignature('getData', 'native').length === 0) {
|
||||
layer.msg("请签名后再确认！", {
|
||||
icon: 2,
|
||||
time: 2000
|
||||
});
|
||||
return;
|
||||
}
|
||||
//将签名的画布保存为base64编码字符串 默认是png的
|
||||
var datapair = $("#signature").jSignature("getData", "image");
|
||||
var i = new Image();
|
||||
i.src = "data:" + datapair[0] + "," + datapair[1];
|
||||
console.log(i.src);
|
||||
$('.img').attr('src', i.src)
|
||||
})
|
||||
|
||||
|
||||
|
||||
function GetQueryString(name, istop) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
|
||||
|
||||
if (r != null) return unescape(r[2]);
|
||||
return null;
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue