jq 使用jq-signature.js实现电子签名1. 引入依赖文件js-signature.js pc或者移动端都可

1. 引入依赖文件js-signature.js

pc或者移动端都可用
文件git地址: jq-signature/jq-signature.js at master · bencentra/jq-signature · GitHub jQuery Signature Plugin (bencentra.github.io)

2.使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div id="signatureparent">
            <!-- 签字区域样式 -->
             <div id="signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>
         </div>
         <br>
         <button type="button" class="btn btn-primary btn-block" disabled="true" id="save">保存</button>
         <button type="button" class="btn btn-default btn-block" id="clear">清除</button>
     </div>
     <div class="autograph">
       <img src="" href="img" />
     </div>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/jq-signature.js"></script>
<script>
$(document).on('ready', function() {
    $("#signature").jqSignature();
});
         
//jqSignature提供了清除的API reset
$('#clear').click(function () {
    $("#signature").jqSignature("clearCanvas");
    $("[href=img]")[0].src = ''
});
//提交
$('#save').click(function () {
	//将签名的画布保存为base64编码字符串
	var dataUrl = $("#signature").jqSignature("getDataURL");
    $("[href=img]")[0].src = dataUrl
})
// 监听签字内容变化
$('#signature').on('jq.signature.changed', function() {
		$('#save').attr('disabled', false);
});
</script>
</html>

jq 使用jq-signature.js实现电子签名

1. 引入依赖文件js-signature.js

2.使用

3.效果图