基于Jq的手写插件
程序员文章站
2022-05-27 22:02:01
以下是js文件： ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../../xsloader.js" data-xsloader-conf2="./xsloader.config" async="async" type="text/javascript" charset="utf-8"></script>
<script src="libs/modernizr.js"></script><!--引入文件-->
<style>
input {
padding: .5em;
margin: .5em;
}
#signatureparent {
color: #000;
background-color: #fff;
padding: 10px;
}
#signature {
border: 1px dotted #3eaed2;
background-color: #ececec;
width: 100%;
}
#signresult {
width: 300px;
height: 300px;
}
</style>
</head>
<body style="background-color: #fff;">
<div id="content" style="width: 100%;padding-top: 15px;">
<center style="font-size: 1.2em;">请在虚线框内签名，完毕后点击 保存 按钮。</center>
<div id="signatureparent">
<div id="signature"></div> //这是要显示写字板的容器
</div>
<div style="text-align: center;">
<input type="button" name="btnreset" id="btnreset" value="重写" />
<input type="submit" class="" name="btnsave" id="btnsave" value="保存签名" />
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><!--引入jq文件，必须在noconflict.js文件之前引入-->
<script src="libs/jsignature.min.noconflict.js"></script> </body> </html>
以下是js文件：
var that = this;
var option = {
isrevoke: false,//是否有撤销按钮
color: "red" //画笔颜色
}
var strokescount = 0; //笔画数，为了记录是否有签名，如果为0，表示没有签名就提交，拒绝提交
var $sigdiv = handsign(option);
function handsign(obj) { //isrevoke:是否有撤销按钮;color:画笔颜色
var $signadiv = $(signature).jsignature({
'undobutton': obj.isrevoke,
"color": obj.color
}), //实例化一个画板
pubsubprefix = 'jsignature.demo.'
$signadiv.on('change', function(e) {
strokescount++; //监听画板，记录笔画数
})
return $signadiv;
/*$(signature).jsignature({option})参数设置
* option = {
width : ratio 定义画布的宽度。数值没有%或px
height : ratio 定义画布的高度。数值没有%或px
sizeratio: 4 // only used when height = ratio
color : #000 定义了中风在画布上的颜色。接受任何颜色的十六进制值
background-color: #fff 定义了画布的背景颜色。接受任何颜色的十六进制值。
decor-color: #eee
linewidth : 0 定义的厚度。接受任何积极的数值
minfatfingercompensation : -10
showundobutton: false
readonly: false
data: []
signatureline: false
}*/
}
$("#btnsave").on("click", function() {
if(strokescount > 0) {
//可选格式：native,image,base30,image/jsignature;base30,svg,image/svg+xml,svgbase64,image/svg+xml;base64
var basedata = $sigdiv.jsignature('getdata', "image"); //获取图片数据，前面不加入data: 直接存入数据库，读取的时候，可以再加
sdk.xsrequest({ //发送异步请求，将图片进行上传，这里使用的是公司分装的，用原生的ajax自行百度
method: "post",
url: lconfig.frompath("handsign/savehandsignimage"),
params: {
"jsdata": basedata[1],
"vid": "abd",
"vtid": "abcd"
}
}).then(function(json) {
return json;
})
} else {
sdk.showtoast("请签名后再保存") //监听是否有写过，如果没有写过则不予以上传，这里使用公司的弹窗sdk,
}
});
$("#btnreset").on("click", function() {
$sigdiv.jsignature('reset'); //重置
strokescount = 0;//重置过后将笔画数也清楚0
});