Skip to content

canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件

Notifications You must be signed in to change notification settings

laninblue/canvasSignature

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件


1、开始工作:

需要最先引入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> ```

2、使用:

html:

(html canvas签名框准备,id为test可自定义)

```html 您的浏览器当前不支持canvas画布,请更换别的浏览器进行签名操作 ```

js(相应的方法调用):

初始化签名样式(这里仅支持一个签名,如需多个签名框需改写组件)

```javascript $('#test').canvasSignature({ fillStyle:'transparent', //生成图片背景色,默认为透明 lineWidth:10, //笔画粗细(尺寸),默认为四像素粗细 strokeStyle:'red' //笔画颜色,默认为黑色 }); ```

清除重写

```javascript $('#test').clearSignature(); ```

生成图片(生成图片格式base64包括:jpg、png格式)

```javascript $('#test').createSignature('png'); ```

3、方法说明:

方法名 参数 说明
canvasSignature fillStyle:生成图片背景色,默认为透明(字符串)
lineWidth:笔画粗细(尺寸),默认为四像素粗细(数字)
strokeStyle:笔画颜色,默认为黑色(字符串)
注意:参数是以对象形式传入,如:
$('#test').canvasSignature({
    fillStyle:'transparent',	//生成图片背景色,默认为透明
    lineWidth:10,	//笔画粗细(尺寸),默认为四像素粗细
    strokeStyle:'red'	//笔画颜色,默认为黑色
});
初始化签名框(主要)
clearSignature 清除签名
createSignature 生成图片格式base64包括:jpg、png格式(默认可不填)(字符串)
注意:参数是以字符串形式传入,如:
$('#signName').createSignature('png');
生成图片

4、兼容性:

兼容IE9及以上浏览器(支持canvas标签功能的浏览器)

About

canvasSignature是基于html5 canvas及jquery实现手写签名(电子签名)功能的js组件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 44.4%
  • JavaScript 30.5%
  • CSS 25.1%