手写签字
## 1.介绍
好签H5签字插件，是一款WEB浏览器上运行，获取用户手写笔迹的JS插件。
笔迹支持svg和png格式。
## 2.引入JS、CSS
地址使用绝对路径。例：
```javascript
<link href="http://ip:28080/sdko/signplugin/ws.plugin.sign.css" rel="stylesheet" />
<script src="http://ip:28080/sdko/signplugin/ws.plugin.sign.js"></script>
```
## 3.授权
```javascript
WSPluginSign.auth((result: boolean) => {
if (!result) alert("授权失败")
})
```
## 4.显示签字板
`WSPluginSign.show(option)`本方法返回一个`promise`
#### option 参数
- `width: number`。签字区域宽度
- `height: number`。签字区域高度
- `lineNumber: number`。签字行数
- `placeholder: boolean`。签字提示语
- `defStrokeSize: number`。默认笔迹粗细`1-9`。默认`4`
- `defStrokeColor: string`。默认笔迹颜色。 `#333333, #1A1A1A, #C41018, #522694, #1890FF, #199907, #E39130`。默认`#333333`
#### 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"/>
<script src="https://pub.wellsign.cn/jslib/jquery-3.3.1.js"></script>
<link href="http://ip:28080/sdko/signplugin/ws.plugin.sign.css" rel="stylesheet" />
<script src="http://ip:28080/sdko/signplugin/ws.plugin.signs"></script>
<script>
$(document).ready(() => {
WSPluginSign.auth((res) => {
console.log(res)
// res = true 授权成功
// res = false 授权失败
})
$('#btn').click(() => {
WSPluginSign.show({
width: 400, // 签字区域宽度
height: 300, // 签字区域高度
lineNumber: 3, // 签字提示行数
placeholder: '请输写笔迹', // 签字提示文本
defStrokeSize: 1, // 初始笔迹粗徐
defStrokeColor: '#333333' // 初始笔迹颜色
}).then(result => {
console.log(result)
if (result.success) {
$('#img').attr('src', result.data.base64)
$('#svg').html(result.data.svgStr)
}
})
})
})
</script>
</head>
<body>
<button id="btn">显示</button>
<div>
<img id="img" style="max-width: 100%"/>
</div>
<div id="svg" style="max-width: 100%"></div>
</body>
<style>
html,body { height: 100%; width: 100%; padding: 0; margin: 0;}
</style>
</html>
```