签字插件v3
离线部署后，需要将css、js文件地址替换成自己的本地地址
http://open.wellsign.cn/sdk/context/ws.signplugin.v3.js
http://open.wellsign.cn/sdk/context/ws.signplugin.v3.css
替换成
http://ip地址+端口/sdk/context/ws.signplugin.v3.js
http://ip地址+端口/sdk/context/ws.signplugin.v3.css
```html
<!DOCTYPE html>
<html lang="en">
<head>
<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,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>好签H5签字板插件</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<link href="http://open.wellsign.cn/sdk/context/ws.signplugin.v3.css" rel="stylesheet" />
<script src="http://open.wellsign.cn/sdk/context/ws.signplugin.v3.js"></script>
<script>
// 签字插件不依赖jquery
$(document).ready(function () {
var signData = undefined // 存储签字笔迹数据
// 初始化授权签字插件。
var plugin = new WSSignplugin({
on: {
/* 授权成功回调 */
authorizeSuccess: function () {
console.log('授权成功')
},
/* 授权失败回调 */
authorizeFail: function (errMsg) {
console.log('授权失败', errMsg)
}
/* end */
}
})
// 打开空白签字板
$('#open').click(function () {
if (!plugin.signboard) return
plugin.signboard.open({
defaultLineSize: 1, // 默认笔迹线粗度
defaultLineColor: '#CC2323', // 默认笔迹线颜色 #404040、#1D1E1F、#1F54A7、#CC2323'
cutEffectArea: true, // 返回裁剪后的笔迹
rowHeight: 50, // 行线高，设置为0的时候不显示该线
on: {
ok: function (res) { // 用户点击确定的
signData = res.data
$('#resultSvg').html(res.svgHtml) // svg 笔迹
$('#resultImg').attr('src', res.base64) // 图片笔迹
},
cancel: function (res) {
console.log('取消或重复签字板显示', res)
}
}
})
})
$('#openWidthData').click(function () {
if (!plugin.signboard) return
if (signData) {
console.log('111', signData)
plugin.signboard.open({
defaultLineSize: 2,
defaultLineColor: '#1F54A7',
defaultSignData: signData, // 初始笔迹数据
cutEffectArea: true,
on: {
ok: function (res) {
signData = res.data
$('#resultSvg').html(res.svgHtml)
$('#resultImg').attr('src', res.base64)
},
cancel: function (res) {
console.log('取消或重复签字板显示', res)
}
}
})
}
})
})
</script>
</head>
<body>
<h2 style="text-align: center;">好签签字板插件v3示例</h2>
<button id="open">打开签字板</button>
<button id="openWidthData">编辑上次笔迹</button>
<h3 style="text-align: center;">SVG 笔迹</h3>
<div id="resultSvg" style="width: 90%; min-height: 200px; border: 1px solid #eaeaea; margin: 0 auto; display: block;"></div>
<h3 style="text-align: center;">Base64 笔迹</h3>
<img id="resultImg" style="width: 90%; min-height: 200px; border: 1px solid #eaeaea; margin: 0 auto; display: block;" />
</body>
<style>
html,body {
height: 100%; width: 100%; padding: 0; margin: 0;
font-family: PingFang SC,Helvetica Neue,Hiragino Sans GB,Helvetica,Microsoft YaHei,Arial;
}
body > button {
display: block;
margin: 10px auto;
text-align: center;
width: 90%;
box-sizing: margin-box;
border: 1px solid #00a0ff;
background: #61c5ff;
color: #00588b;
font-size: 16px;
padding: 6px;
border-radius: 4px;
}
</style>
</html>
```