利用 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,
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>
最后效果
