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

    Github地址：https://github.com/brinley/jSignature

    之前做一个项目，需要用到签名的功能，然后网上各种找插件，最后在github找到了这个，确实是比较好用，完全满足我项目的需要，所以整理记录下来，供参考吧。

1.介绍：

     jSignature是一个jQuery插件，可简化浏览器窗口中签名捕获字段的创建，允许用户使用鼠标，钢笔或手指绘制签名。

2.参数和方法

（1）参数

参数设置示例

var arguments = {
            'width': '100%',
            'height': '100%',
            'UndoButton':true,
            'cssclass': 'sign-box',
            'color':'#000',
            'signatureLine': false,//去除默认画布上那条横线
            'lineWidth': '2',
            'background-color': "red",
};
$("#signature").jSignature(arguments);

（2）方法

$("#signature").jSignature("reset");

$("#signature").jSignature("clear");

$("#signature").jSignature("destroy");

$("#signature").jSignature("getData", "image");

datapair = $("#signature").jSignature("getData","base30") 
$("#signature").jSignature("setData", "data:" + datapair.join(","))

$("#signature").jSignature("disable");

$("#signature").jSignature("enable");

$("#signature").jSignature("isModified");
//返回true则是签了内容，false则是没有签任何内容

if ($("#signature").jSignature("getData", "native").length == 0) {
  alert("没签");				      
} else {
  alert("签了");
}

$("#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});
 	}
});

    使用应该是比较简单的。