手写签字（pad）-已废弃
[演示demo](https://test.wellsign.cn/sdko/signplugin/ws.h5.signplugin.html)
## 1.介绍
好签H5签字插件，是一款WEB浏览器上运行，获取用户手写笔迹的JS插件。
笔迹支持svg和png格式。
## 2.引入JS、CSS
地址使用绝对路径。例：
```javascript
<link href="http://ip:28080/sdko/signplugin/ws.h5.signplugin.css" rel="stylesheet" />
<script src="http://ip:28080/sdko/signplugin/ws.h5.signplugin.js"></script>
```
## 3.授权
```javascript
WSPlugin.auth(function (authResult: boolean) {
if (!authResult) alert("授权失败")
})
```
## 4.显示签字板
`WSPlugin.show(option)`本方法返回一个`promise`
#### option 参数
- `lineHeight: number`。行高。
- `lineCount: number`。行数。
- `direction: 'vertical' | 'vertical'`。签字方向，默认横屏、设置`vertical` 则为竖屏。
- `isCutStroke: boolean`。返回的笔迹是否裁剪。默认`true`。
- `strokeSize: number`。笔迹粗细`1-9`。默认`5`。
- `strokeColor: string`。笔迹颜色。 `#333333, #1A1A1A, #C41018, #522694, #1890FF, #199907, #E39130`。默认`#333333`。
- `strokeData: string`。需要回显的笔迹信息。
#### result 返回值
```javascript
WSPlugin.show({ ... }).then(result => {
if (result === false) {
// 用户的点击了关闭按钮
} else {
const { data: string, base64: string, svgStr: string } = result
// data : 需要回显笔迹信息
// base64 : 笔迹的图片
// svgStr : 笔迹的svg数据
}
})
```
## 5.完整的demo
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"/>
<title>好签</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="http://ip:28080/sdko/signplugin/ws.h5.signplugin.css" rel="stylesheet" />
<script src="http://ip:28080/sdko/signplugin/ws.h5.signplugin.js"></script>
<script>
// 插件不依赖jquery，此处只做demo演示所用。
$(document).ready(function () {
// 1.授权。如果页面被刷新，需要重新获取授权信息
WSPlugin.auth(function (authResult) {
if (!authResult) alert('授权失败')
})
$('#btn').click(function () {
// 2.读取需要回显数据
var strokeData = localStorage.getItem('tmp') || ''
// 3.显示签字板
WSPlugin.show({
lineHeight: 100, // 行高
lineCount: 3, // 行数
direction: 'vertical',
isCutStroke: true,
strokeSize: 5,
strokeColor: '#333333',
strokeData: strokeData
}).then(function (result) {
if (result !== false) {
// 保存回显数据
window.localStorage.setItem("tmp", result.strokeData);
// 显示笔迹
$("#img").attr("src", result.base64);
$("#svg").html(result.svgStr);
}
});
});
});
</script>
</head>
<body>
<button id="btn">显示签字板</button>
<br />
<img id="img" />
<br />
<div id="svg"></div>
</body>
<style>
html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
button { width: 100%; height: 40px; }
#img, #svg > svg { max-width: 200px; max-height: 200px; }
</style>
</html>
```