Jquery手写签字插件jSignature
5
1
7763
0
有侵犯版权请及时联系我们，我们将在24小时内删除素材。
投诉举报
安奇
Github地址：https://github.com/brinley/jSignature
之前做一个项目，需要用到签名的功能，然后网上各种找插件，最后在github找到了这个，确实是比较好用，完全满足我项目的需要，所以整理记录下来，供参考吧。
1.介绍：
jSignature是一个jQuery插件，可简化浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，钢笔或手指绘制签名。
2.参数和方法
（1）参数
| 参数说明 | 说明 |
| width | 画布宽度。直接输入数字，就是px。例如200，就是200px。也支持输入%和px，例如输入100%或者200px。 |
| height | 画布高度。直接输入数字，就是px。例如200，就是200px。也支持输入%和px，例如输入100%或者200px。 |
| cssclass | 指定画布的css类名，例如sign |
| color | 指定签字的颜色，例如red、#000000 |
| lineWidth | 指定签字的粗细，默认是1，想要加粗可设置2.、3、4、5 |
| background-color | 画布的背景色，例如red、#000000 |
| signatureLine | 默认画布上那条横线，true就是带着横线，false就是去除横线 |
| UndoButton | 显示撤销上一笔画按钮，true就是显示，false就是隐藏 如果想要修改撤销按钮里面的文字（Undo last stroke），修改jSignature.min.noconflict.js的 ”Undo last stroke“为”撤销上一笔画“就可以 |
参数设置示例
var arguments = {
'width': '100%',
'height': '100%',
'UndoButton':true,
'cssclass': 'sign-box',
'color':'#000',
'signatureLine': false,//去除默认画布上那条横线
'lineWidth': '2',
'background-color': "red",
};
$("#signature").jSignature(arguments);（2）方法
| 方法 | 说明 |
| reset | 重置画布内容。例如 $("#signature").jSignature("reset"); |
| clear | 清空画布内容。例如 $("#signature").jSignature("clear"); |
| destroy | 销毁画布。例如 $("#signature").jSignature("destroy"); |
| getData | 接受一个参数-数据格式的名称。返回适合该数据格式的数据对象。例如 $("#signature").jSignature("getData", "image"); |
| setData | 一般不用这个方法就可以获得图像资源。 例如 datapair = $("#signature").jSignature("getData","base30")
$("#signature").jSignature("setData", "data:" datapair.join(",")) |
| importData（setData的别名跟setData一样的用法） | |
| disable | 使画布为只读并禁用jSignature按钮。例如 $("#signature").jSignature("disable"); |
| enable | 使画布为只读并启用jSignature按钮。例如 $("#signature").jSignature("enable"); |
| isModified | 如果修改了jSignature，则返回布尔值true，否则返回false。 可以用这个方法判断是否签了内容。例如 $("#signature").jSignature("isModified");
//返回true则是签了内容，false则是没有签任何内容注意，也可以使用下面的方法判断是否签了内容。 if ($("#signature").jSignature("getData", "native").length == 0) {
alert("没签");
} else {
alert("签了");
} |
| getSettings | 返回jSignature实例的可配置设置。 |
| updateSetting | 允许三个参数 -配置名称,新的值, 布尔型。例如重新设置lineWidth。 $("#signature").jSignature("updateSetting","lineWidth","5"); |
3.使用示例
（1）引入jquery、jSignature.min.noconflict.js
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script src="js/jSignature.min.noconflict.js"></script>
（2）css和html
<style type="text/css">
select {
padding: 4px;
}
#signatureparent {
color: darkblue;
background-color: darkgrey;
padding :0px;
margin: 20px 0;
}
#signature {
border: 1px solid #808080;
background-color:lightgrey;
}
#sign-code {
margin: 20px 0;
}
</style>
<div class="container">
<div id="signatureparent">
<div id="signature"></div>
</div>
<div>
<select name="formats">
<option value="default">default(base64)</option>
<option value="image">image</option>
<option value="svgbase64">svgbase64</option>
</select>
<button class="btn btn-sm btn-success" id="save">保存</button>
<button class="btn btn-sm btn-danger" id="clear">清除</button>
<button class="btn btn-sm btn-danger" id="destroy">销毁画布</button>
<button class="btn btn-sm btn-warning" id="check">查看是否签了</button>
</div>
<div id="sign-code">
<textarea class="form-control code-box" rows="5"></textarea>
</div>
<div id="show-sign">
</div>
</div>（3）js
var arguments = {
'width': '100%',
'height': '100%',
'UndoButton': false,
'cssclass': 'sign-box',
'color':'#000',
'signatureLine': false,//去除默认画布上那条横线
'lineWidth': '2',
'background-color': "",
};
$("#signature").jSignature(arguments);
//保存数据
$('#save').click(function () {
var formats = $("[name='formats']").val();//格式
if ($("#signature").jSignature("getData", "native").length == 0) {
//询问框
layer.msg("您还没有输入文字，请输入签名！", {icon: 5});
} else {
if (formats == "default") {
var sign = $("#signature").jSignature("getData");
} else if (formats == "image") {
var sign = $("#signature").jSignature("getData","image");
//拼接base64
var sign = "data:" sign[0] "," sign[1];
} else if (formats == "svgbase64") {
var sign = "data:" $("#signature").jSignature("getData","svgbase64");
}
$(".code-box").html(sign);
$("#show-sign").html("");
$("#show-sign").html("<img src='" sign "'>");
}
});
//清除
$('#clear').click(function () {
$("#signature").jSignature("clear");
layer.msg("清除成功！");
});
//销毁画布
$('#destroy').click(function () {
$("#signature").jSignature("destroy");
layer.msg("销毁成功！");
});
//查看
$('#check').click(function () {
var msg = "使用isModified方法进行判断！<br/>";
var re = $("#signature").jSignature("isModified");
if (re == true) {
msg = "签了！";
layer.msg(msg,{icon: 6});
} else {
msg = "没有签！";
layer.msg(msg,{icon: 5});
}
}); 使用应该是比较简单的。
评论（0）
帮助他人、分享经验
我要评论
请在Safari浏览器下载