利用 canvas 实现签名效果

利用 canvas 实现签名效果 

使用插件  jSignature  github：https://github.com/brinley/jSignature

如果再H5 中使用需要加载  flashcanvas.js

方法：

方法名称使用方法说明
clear .jSignature("clear") 清空并重置画布
getData .jSignature("getData", "base30") 将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
importData .jSignature("importData",dataurl) 使用从上述getData方法提取的数据URL更新现有的jSignature画布

 

 选项参数：

 

参数名称说明默认值
width 定义画布的宽度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 250
height 定义画布的高度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 150
color 定义画布上笔画的颜色。 接受任何颜色十六进制值 #000
background-color 定义画布的背景颜色。 接受任何颜色十六进制值 #fff
lineWidth 定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度） 1
cssclass 定义画布的自定义css类 None

  

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="utf-8">
	<meta charset="utf-8">
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<script src="libs/jquery.js"></script>
	<script type="text/javascript" src="libs/flashcanvas.js"></script><![endif]-->
	<style>
		html,body{
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#signature{
			border: 2px solid #ccc;
			background-color:lightgrey;
		}

		.btn-package{
			position: absolute;
			top:10px;
			right: 10px;
		}
	</style>
</head>
<body>


<div id="signature"></div>

<div class="btn-package">
	<button class="reset">清除</button>
	<button class="get">获取</button>
</div>
<script src="libs/jSignature.min.js"></script>
<script>
	$(document).ready(function() {
		var $sigdiv = $("#signature")
		var h = $(window).height()-8;
		var sw = $(document.body).width()-4;
		console.log(sw);
		console.log(h);
		$sigdiv.jSignature({
			color: "#000",
			height: h,
			width: sw,
			lineWidth:3,
			"background-color": "#fff"
		});


		$('.reset').click(function(){
			$sigdiv.jSignature("reset")
		})

		$('.get').click(function(){
			var data = $sigdiv.jSignature('getData', 'image');
			var src = "data:" + data[0] + "," + data[1];
			console.log(src);
		})
	})
</script>

<script>

</script>
</body>
</html>

　　最后效果

 

posted @ 2020-11-23 17:42  怪-人  阅读(642)  评论(0)    收藏  举报