jSignature手写签字
原创 jquery jSignature 手写签字 2021-01-24 16:59:36
2 收藏 1 浏览1070 评论0
安奇
已发1篇
有侵犯版权请及时联系我们,我们将在24小时内删除文章。
投诉举报

    

    本站下载演示地址https://www.yusan.cn/sucai/53.html

    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) 我要评论