├── README.md
├── css
    └── index.css
├── demo.html
├── index.html
└── js
    └── canvasSignature.js


/README.md:
--------------------------------------------------------------------------------
 1 | <h2>canvasSignature简介&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.shdnfw.com/plugin/canvasSignature/demo.html">手写签名（电子签名canvasSignature.js)使用示例</a></h2>
 2 | <p>canvasSignature是基于html5 canvas及jquery实现手写签名（电子签名）功能的js组件</p>
 3 | 
 4 | <hr/>
 5 | 
 6 | <h3>1、开始工作：</h3>
 7 | <p>
 8 |   需要最先引入jquery (Bootstrap中文网开源项目免费 CDN 服务)：
 9 | </p>
10 | ```html
11 | <script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
12 | ```
13 | <p>
14 |   我们需要在页面中引入关键js：
15 | </p>
16 | ```html
17 | <script type="text/javascript" src="....../canvasSignature.js"></script>
18 | ```
19 | 
20 | <h3>2、使用：</h3>
21 | <h4>html：</h4>
22 | <p>
23 |   （html canvas签名框准备，id为test可自定义）
24 | </p>
25 | ```html
26 | <canvas id="test" width="500" height="300">
27 |     您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作
28 | </canvas>
29 | ```
30 | 
31 | <h4>js（相应的方法调用）：</h4>
32 | <p>
33 |   初始化签名样式（这里仅支持一个签名，如需多个签名框需改写组件）
34 | </p>
35 | ```javascript
36 | $('#test').canvasSignature({
37 |     fillStyle:'transparent',	//生成图片背景色，默认为透明
38 |     lineWidth:10,	//笔画粗细（尺寸），默认为四像素粗细
39 |     strokeStyle:'red'	//笔画颜色，默认为黑色
40 | });
41 | ```
42 | <p>
43 |   清除重写
44 | </p>
45 | ```javascript
46 | $('#test').clearSignature();
47 | ```
48 | <p>
49 |   生成图片（生成图片格式base64包括：jpg、png格式）
50 | </p>
51 | ```javascript
52 | $('#test').createSignature('png');
53 | ```
54 | 
55 | 
56 | <h3>3、方法说明：</h3>
57 | <table>
58 |   <tr>
59 |     <th>方法名</th>
60 |     <th>参数</th>
61 |     <th>说明</th>
62 |   </tr>
63 |   <tr>
64 |     <td>canvasSignature</td>
65 |     <td>
66 |       fillStyle：生成图片背景色，默认为透明(字符串)<br/>
67 |       lineWidth：笔画粗细（尺寸），默认为四像素粗细(数字)<br/>
68 |       strokeStyle：笔画颜色，默认为黑色(字符串)<br/>
69 |       注意：参数是以对象形式传入，如:<pre>$('#test').canvasSignature({
70 |     fillStyle:'transparent',	//生成图片背景色，默认为透明
71 |     lineWidth:10,	//笔画粗细（尺寸），默认为四像素粗细
72 |     strokeStyle:'red'	//笔画颜色，默认为黑色
73 | });</pre>
74 |     </td>
75 |     <td>初始化签名框（主要）</td>
76 |   </tr>
77 |   <tr>
78 |     <td>clearSignature</td>
79 |     <td>
80 |       无
81 |     </td>
82 |     <td>清除签名</td>
83 |   </tr>
84 |   <tr>
85 |     <td>createSignature</td>
86 |     <td>
87 |       生成图片格式base64包括：jpg、png格式(默认可不填)(字符串)<br/>
88 |       注意：参数是以字符串形式传入，如:<pre>$('#signName').createSignature('png');</pre>
89 |     </td>
90 |     <td>生成图片</td>
91 |   </tr>
92 | </table>
93 | 
94 | <h3>4、兼容性：</h3>
95 | <p>
96 |   兼容IE9及以上浏览器（支持canvas标签功能的浏览器）
97 | </p>
98 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
 1 | @charset "utf-8";
 2 | /*
 3 | //author relaxWang begin 2015/12
 4 | //last modify 2016/12/13
 5 | //Version 0.15
 6 | //移动端样式定义，兼容PC端浏览器
 7 | */
 8 | 
 9 | /* reset */
10 | *{ /*font-family:"Microsoft YaHei","微软雅黑","Helvetica Neue",Helvetica,STHeiTi,sans-serif;*/ font-family:tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-seri; box-sizing:border-box;}
11 | html,body,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,ul,li,form,iframe,object,input{ margin:0px; padding:0px;}
12 | a{ text-decoration:none;}
13 | h1,h2,h3,h4,h5,h6,strong{ font-weight:bold;}
14 | ul,ol,dl{list-style: none outside none;}
15 | input,textarea,select{ font-family:inherit;}
16 | a:active, a:focus, input:active, input:focus, button:active, button:focus{ outline:none; -moz-outline:none;} /*去掉移动端firefox a标签的虚线框 PC chrome文本输入框的边框焦点时候的颜色 */
17 | input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner{ border:none;} /*去掉移动端firefox 按钮获得焦点显示虚线框的样式 */
18 | table { border-collapse:collapse; border-spacing:0; width:100%;}
19 | html,body{ position:relative; height:100%; width:100%;}  /* 注意 某些版本的IE中（IE9）会导致iframe的内容定位错误，请参考是否去掉该属性，或者为iframe增加relative的属性 */
20 | iframe{ width:100%; height:100%; position:relative;}
21 | /* 清除现代IE浏览器的输入框和密码框的默认交互按钮 */
22 | ::-ms-clear, ::-ms-reveal{display: none;}
23 | /* 针对不支持语义化标签浏览器做的应对*/
24 | article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
25 | /* chrome内核浏览器对cursor:pointer的样式对象，点击触发样式中会有浅蓝色背景框，用该样式去除 */
26 | /* -webkit-tap-highlight-color:rgba(255,255,255,0); */
27 | /* reset end */
28 | 
29 | 
30 | body {min-width: 1280px;}
31 | .container {padding:30px 50px 100px;}
32 | .container h3 {margin:10px 0;}
33 | .container h2 {height: 36px;line-height: 36px;margin:20px 0;}
34 | .container a {margin-left:20px;color: #428bca;font-size: 16px;font-weight: 700;}
35 | .container a:hover {color: #2a6496;text-decoration: underline;}
36 | pre {background-color: #f5f5f5;border:1px solid #ccc;padding:10px;overflow: auto;color: #c82829;}
37 | pre span {color: #718c00;}
38 | pre span.b {color: #0086b3;}
39 | p {padding-left: 50px;}
40 | p a {color: #428bca;}
41 | p a:hover {color: #2a6496;text-decoration: underline;}
42 | table {width: 90%;background-color: #eaeff2;}
43 | table tr th {padding: 10px;}
44 | table tr td {padding:10px 10px 10px 20px;background-color: #fff;border:1px solid #eaeff2;}
45 | table tr td:first-child {background-color: #eaeff2;border-color: #fff;}
46 | .paramItem {overflow: hidden;}
47 | .paramItem > strong {display:block;font-weight:normal;color:#fff;padding:5px 10px;background-color: #39A4DC;margin:10px 0;}
48 | .paramItem > div {overflow: hidden;}
49 | 
50 | canvas {border:1px solid #ccc;}
51 | img {border:1px solid #ccc;}
52 | button {padding:5px 15px;border:1px solid #ccc;color:#666;background-color: #fff;border-radius: 6px;}
53 | 
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 
60 | 
61 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <meta charset="UTF-8"/>  
 5 | 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
 6 |     <title>canvasSignature.js实现手写签名</title>
 7 | 	<link rel="stylesheet" type="text/css" href="css/index.css" />
 8 | 
 9 | 	<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
10 | 	<script src="js/canvasSignature.js"></script>
11 | </head>
12 | <body>
13 | 	<div class="container">
14 | 		
15 | 		<h2>手写签名实现(canvasSignature.js)使用示例</h2>
16 | 	    <div class="paramItem">
17 | 	    	<strong>以下为手写签名区域</strong>
18 | 	    </div>
19 | 	    <canvas id="signName" width="500" height="300">
20 | 	        您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作
21 | 	    </canvas>
22 | 	    <button id="clearCanvas">重写</button>
23 | 	    <button id="createImage">生成图片</button>
24 | 	    <br/>
25 | 	    <div class="paramItem">
26 | 	    	<strong>生成图片如下：</strong>
27 | 	    </div>
28 | 	    <img id="newImage" src="" />
29 | 		
30 | 	</div>
31 | 
32 | </body>
33 | <script>
34 | $(function(){
35 | 	//初始化签名样式（这里仅支持一个签名，如需多个签名框需改写组件）
36 | 	$('#signName').canvasSignature({
37 | 		fillStyle:'transparent',	//生成图片背景色，默认为透明
38 | 		lineWidth:10,	//笔画粗细（尺寸），默认为四像素粗细
39 | 		strokeStyle:'red'	//笔画颜色，默认为黑色
40 | 	});
41 | 
42 | 	//清除重写
43 | 	$('#clearCanvas').on('click',function(){
44 | 		//清除重写调用方式
45 | 		$('#signName').clearSignature();
46 | 	});
47 | 
48 | 	//生成图片
49 | 	$('#createImage').on('click',function(){
50 | 		//生成图片格式base64包括：jpg、png格式
51 | 		console.log($('#signName').createSignature('png'));
52 | 		$('#newImage').attr('src',$('#signName').createSignature('png'));
53 | 	});
54 | 
55 | });
56 | </script>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | 	<meta charset="utf-8" />
  5 | 	<title>手写签名（电子签名）功能实现canvasSignature.js</title>
  6 | 
  7 | 	<link rel="stylesheet" type="text/css" href="css/index.css" />
  8 | 
  9 | 	<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
 10 | </head>
 11 | <body>
 12 | 	<div class="container">
 13 | 		<h2>canvasSignature简介<a href="demo.html">手写签名（电子签名canvasSignature.js)使用示例</a></h2>
 14 | 		<p>canvasSignature是基于html5 canvas及jquery实现手写签名（电子签名）功能的js组件</p>
 15 | 
 16 | 		<hr/>
 17 | 
 18 | 		<h3>1、开始工作：</h3>
 19 | 		<p>
 20 | 			需要最先引入jquery (Bootstrap中文网开源项目免费 CDN 服务)：
 21 | 		</p>
 22 | 		<pre><script-tag type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script-tag></pre>
 23 | 		<p>
 24 | 			我们需要在页面中引入关键js：
 25 | 		</p>
 26 | 		<pre><script-tag type="text/javascript" src="....../canvasSignature.js"></script-tag></pre>
 27 | 
 28 | 		<h3>2、使用：</h3>
 29 | 		<h4>html：</h4>
 30 | 		<p>
 31 | 			（html canvas签名框准备，id为test可自定义）
 32 | 		</p>
 33 | 		<pre><canvas id="test" width="500" height="300">
 34 |     您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作
 35 | </canvas></pre>
 36 | 
 37 | 		<h4>js（相应的方法调用）：</h4>
 38 | 		<p>
 39 | 			初始化签名样式（这里仅支持一个签名，如需多个签名框需改写组件）
 40 | 		</p>
 41 | 		<pre>$('#test').canvasSignature({
 42 | 	fillStyle:'transparent',	//生成图片背景色，默认为透明
 43 | 	lineWidth:10,	//笔画粗细（尺寸），默认为四像素粗细
 44 | 	strokeStyle:'red'	//笔画颜色，默认为黑色
 45 | });</pre>
 46 | 		<p>
 47 | 			清除重写
 48 | 		</p>
 49 | 		<pre>$('#test').clearSignature();</pre>
 50 | 		<p>
 51 | 			生成图片（生成图片格式base64包括：jpg、png格式）
 52 | 		</p>
 53 | 		<pre>$('#test').createSignature('png');</pre>
 54 | 		
 55 | 
 56 | 		<h3>3、方法说明：</h3>
 57 | 		<table>
 58 | 			<tr>
 59 | 				<th>方法名</th>
 60 | 				<th>参数</th>
 61 | 				<th>说明</th>
 62 | 			</tr>
 63 | 			<tr>
 64 | 				<td>canvasSignature</td>
 65 | 				<td>
 66 | 					fillStyle：生成图片背景色，默认为透明(字符串)<br/>
 67 | 					lineWidth：笔画粗细（尺寸），默认为四像素粗细(数字)<br/>
 68 | 					strokeStyle：笔画颜色，默认为黑色(字符串)<br/>
 69 | 					注意：参数是以对象形式传入，如:<pre>$('#test').canvasSignature({
 70 | 	fillStyle:'transparent',	//生成图片背景色，默认为透明
 71 | 	lineWidth:10,	//笔画粗细（尺寸），默认为四像素粗细
 72 | 	strokeStyle:'red'	//笔画颜色，默认为黑色
 73 | });</pre>
 74 | 				</td>
 75 | 				<td>初始化签名框（主要）</td>
 76 | 			</tr>
 77 | 			<tr>
 78 | 				<td>clearSignature</td>
 79 | 				<td>
 80 | 					无
 81 | 				</td>
 82 | 				<td>清除签名</td>
 83 | 			</tr>
 84 | 			<tr>
 85 | 				<td>createSignature</td>
 86 | 				<td>
 87 | 					生成图片格式base64包括：jpg、png格式(默认可不填)(字符串)<br/>
 88 | 					注意：参数是以字符串形式传入，如:<pre>$('#signName').createSignature('png');</pre>
 89 | 				</td>
 90 | 				<td>生成图片</td>
 91 | 			</tr>
 92 | 		</table>
 93 | 
 94 | 		<h3>4、兼容性：</h3>
 95 | 		<p>
 96 | 			兼容IE9及以上浏览器（支持canvas标签功能的浏览器）
 97 | 		</p>
 98 | 
 99 | 		
100 | 	</div>
101 | </body>
102 | <script type="text/javascript">
103 | 	$('pre').each(function(){
104 | 		var _tmp = $(this).html();
105 | 		_tmp = _tmp.replace(new RegExp('<','gm'),'&lt;').replace(new RegExp('script-tag',"gm"),'script').replace(new RegExp('link-tag',"gm"),'link').replace(new RegExp('SCRIPT-TAG',"gm"),'script').replace(new RegExp('LINK-TAG',"gm"),'link');
106 | 		$(this).html(_tmp);
107 | 	});
108 | </script>
109 | </html>


--------------------------------------------------------------------------------
/js/canvasSignature.js:
--------------------------------------------------------------------------------
  1 | ;(function($){
  2 | 	//默认参数及其介绍
  3 | 	var defaults = {
  4 | 		fillStyle:'transparent',	//生成图片背景色，默认为透明
  5 | 		lineWidth:4,	//笔画粗细（尺寸），默认为四像素粗细
  6 | 		strokeStyle:'#000'	//笔画颜色，默认为黑色
  7 | 	};
  8 | 
  9 | 	/* 电子签名实现 */
 10 |     var _drawCount = 0;
 11 |     var _drawSign = false;
 12 |     var _context = '';
 13 |     var _canvas = '';
 14 |     var _isPC = true;
 15 |     //判定是移动端还是PC端
 16 | 	if (!!("ontouchend" in document)) _isPC = false;
 17 | 
 18 | 	function _setCanvasInit(ele,param){
 19 |     	_canvas = ele;
 20 |     	_context = _canvas.getContext('2d');
 21 |     	_drawCount = 0;
 22 | 
 23 |     	_context.fillStyle = param.fillStyle;
 24 |     	_context.lineWidth = param.lineWidth;
 25 |     	_context.strokeStyle = param.strokeStyle;
 26 |     }
 27 | 
 28 | 	//初始化签名框
 29 | 	$.fn.canvasSignature = function(options){
 30 | 		var params = $.extend(defaults,options);
 31 | 
 32 | 	    //初始化
 33 | 	    _setCanvasInit($(this).get(0),params);
 34 | 
 35 | 
 36 | 	    if(!_isPC){
 37 | 	        _canvas.addEventListener('touchstart',function(e){
 38 | 	            var touch = e.touches[0];
 39 | 	            _context.beginPath();
 40 | 	            _context.moveTo(touch.pageX - $(_canvas).offset().left,touch.pageY - $(_canvas).offset().top - $('body').offset().top);
 41 | 	            _context.lineTo(touch.pageX - $(_canvas).offset().left + 4,touch.pageY - $(_canvas).offset().top - $('body').offset().top);
 42 | 	            _context.stroke();
 43 | 	            _drawSign = true;
 44 | 	            _drawCount ++;
 45 | 	        },false);
 46 | 	        _canvas.addEventListener('touchmove',function (e) {
 47 | 	            if(_drawSign){
 48 | 	                var touch = e.touches[0];
 49 | 	                _context.lineTo(touch.pageX - $(_canvas).offset().left,touch.pageY - $(_canvas).offset().top - $('body').offset().top);
 50 | 	                _context.stroke();
 51 | 	            }
 52 | 	        },false);
 53 | 	        _canvas.addEventListener('touchend',function(e){
 54 | 	            if(_drawSign){
 55 | 	                _drawSign = false;
 56 | 	                _context.closePath();
 57 | 	            }
 58 | 	        },false);
 59 | 	    }else{
 60 | 	        _canvas.onmousedown = function(e){
 61 | 	            var e = e || window.event;
 62 | 	            _context.beginPath();
 63 | 	            _context.moveTo(e.pageX - $(_canvas).offset().left,e.pageY - $(_canvas).offset().top - $('body').offset().top);
 64 | 	            _context.stroke();
 65 | 	            _drawSign = true;
 66 | 	            _drawCount ++;
 67 | 	        }
 68 | 	        _canvas.onmousemove = function(e){
 69 | 	            if(_drawSign){
 70 | 	                var e = e || window.event;
 71 | 	                _context.lineTo(e.pageX - $(_canvas).offset().left, e.pageY - $(_canvas).offset().top - $('body').offset().top);
 72 | 	                _context.stroke();
 73 | 	            }
 74 | 	        }
 75 | 	        _canvas.onmouseout = function(e){
 76 | 	            if(_drawSign){
 77 | 	                _drawSign = false;
 78 | 	                _context.closePath();
 79 | 	            }
 80 | 	        }
 81 | 	        _canvas.onmouseup = function(e){
 82 | 	            if(_drawSign){
 83 | 	                _drawSign = false;
 84 | 	                _context.closePath();
 85 | 	            }
 86 | 	        }
 87 | 	    }
 88 | 
 89 | 	    return this;
 90 | 
 91 | 	};
 92 | 
 93 | 	//清除签名
 94 | 	$.fn.clearSignature = function(){
 95 |    		_drawCount = 0;
 96 |     	_context.clearRect(0,0,_canvas.width,_canvas.height);
 97 | 
 98 |     	return this;
 99 | 	};
100 | 
101 | 	//生成图片
102 | 	$.fn.createSignature = function(pictureType){
103 | 		//生成图片格式base64包括：jpg、png格式
104 | 		var _image = '';
105 | 
106 | 		switch(pictureType){
107 | 			case 'jpg':
108 | 				_image = _canvas.toDataURL("image/jpeg");
109 | 				break;
110 | 			case 'png':
111 | 				_image = _canvas.toDataURL("image/png");
112 | 				break;
113 | 			default:
114 | 				_image = _canvas.toDataURL();
115 | 				break;
116 | 		}
117 | 
118 | 		return _image;
119 | 	};
120 | 
121 | })(jQuery);


--------------------------------------------------------------------------------