html页面实现手写签名功能和一些参数设置

最新推荐文章于 2025-12-04 17:59:42 发布

原创最新推荐文章于 2025-12-04 17:59:42 发布 · 6.9k 阅读

11 ·

CC 4.0 BY-SA版权

HTML 同时被 3 个专栏收录

5 篇文章

订阅专栏

4 篇文章

订阅专栏

3 篇文章

订阅专栏

这篇博客介绍了如何在HTML页面中实现手写签名功能，并探讨了相关的参数设置。通过示例代码，作者展示了如何利用jSignature插件进行签名操作，并提供了判断签名是否存在的一种方法。

需要用到的js : jSignature.min.js, jquery-3.0.0.min.js
心情不好,看底下例子代码,有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
	<script type="text/javascript" src="jSignature.min.js"></script>
</head>
<body>
<table  width="95%"  align="center">
    <tr>
        <td height="57" colspan="4" align="left" >
            <fieldset style="border: 1px solid green; width:96% ">
                <legend>Signature</legend>
                <div id="signature" style="width:99%">
                </div>
            </fieldset>
        </td>
    </tr>
    <tr>
    	<td>
        	<button id="test" onClick="ToImgBaseData();">ToImgData</button>
        </td>
    </tr>
</table>

<script>
	$("#signature").jSignature(); //把签字板放入div
	//var $sigdiv = $("#signature"); $sigdiv.jSignature("reset");(这两句代码为清空签字板,说白了就是签错了需要重置的时候用)
	
	function ToImgBaseData()//把签字板的内容转成图片的数据流
	{
		var $sigdiv = $("#signature");
		//$("#signature").jSignature({'decor-color':'#fff','height':'200px','width':'100%'}) 这行代码为放入div时加上一些高度和宽度的设置,decor-color为设置签字底线的颜色,如果不想要底线就把它设为跟背景色一致即可
		var datapair = $sigdiv.jSignature("getData", "image"); //设置输出的格式，具体可以参考官方文档
		var imagebase64 = datapair[1].replace(/\+/g, '%2B');
		console.log(imagebase64); //console.log出来的调试信息在浏览器的f12中查看,不会的也可以用alert(imagebase64),得到的数据流可以开文件句柄转成实际图片文件,不过需要base64解码
	}
</script>

</body>
</html>

ps: 如果需要判断是否又在签字板签字可用if($(’#signature’).jSignature(‘getData’, ‘native’).length<=0)