canvasSignature简介 手写签名(电子签名canvasSignature.js)使用示例
canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件
需要最先引入jquery (Bootstrap中文网开源项目免费 CDN 服务):
```html <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> ```我们需要在页面中引入关键js:
```html <script type="text/javascript" src="....../canvasSignature.js"></script> ```(html canvas签名框准备,id为test可自定义)
```html 您的浏览器当前不支持canvas画布,请更换别的浏览器进行签名操作 ```初始化签名样式(这里仅支持一个签名,如需多个签名框需改写组件)
```javascript $('#test').canvasSignature({ fillStyle:'transparent', //生成图片背景色,默认为透明 lineWidth:10, //笔画粗细(尺寸),默认为四像素粗细 strokeStyle:'red' //笔画颜色,默认为黑色 }); ```清除重写
```javascript $('#test').clearSignature(); ```生成图片(生成图片格式base64包括:jpg、png格式)
```javascript $('#test').createSignature('png'); ```方法名 | 参数 | 说明 |
---|---|---|
canvasSignature |
fillStyle:生成图片背景色,默认为透明(字符串) lineWidth:笔画粗细(尺寸),默认为四像素粗细(数字) strokeStyle:笔画颜色,默认为黑色(字符串) 注意:参数是以对象形式传入,如: $('#test').canvasSignature({ fillStyle:'transparent', //生成图片背景色,默认为透明 lineWidth:10, //笔画粗细(尺寸),默认为四像素粗细 strokeStyle:'red' //笔画颜色,默认为黑色 }); |
初始化签名框(主要) |
clearSignature | 无 | 清除签名 |
createSignature |
生成图片格式base64包括:jpg、png格式(默认可不填)(字符串) 注意:参数是以字符串形式传入,如: $('#signName').createSignature('png'); |
生成图片 |
兼容IE9及以上浏览器(支持canvas标签功能的浏览器)