插件地址

http://bencentra.github.io/jq-signature/

采用技术

  • jq-signature.min.js
  • Developed using jQuery 2.1.4.
<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="jquery.min.js"></script>

<script src="jq-signature.min.js"></script>

<script>

	$(function(){

		$('.js-signature').jqSignature();

	})

	function clearCanvas() {

		$('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');

		$('.js-signature').eq(1).jqSignature('clearCanvas');

		$('#saveBtn').attr('disabled', true);

	}

	function saveSignature() {

		$('#signature').empty();

		var dataUrl = $('.js-signature').jqSignature('getDataURL');

		var img = $('<img>').attr('src', dataUrl);

		$('#signature').append($('<p>').text("Here's your signature:"));

		$('#signature').append(img);

	}

	$('.js-signature').eq(1).on('jq.signature.changed', function() {

		$('#saveBtn').attr('disabled', false);

	});

</script>

</head>

<body>

<div class="js-signature" data-width="600" data-height="200" data-border="1px solid black" data-line-color="#bc0000" data-auto-fit="true"></div>

			<p><button id="clearBtn" class="btn btn-default" onclick="clearCanvas();">Clear Canvas</button> 

			<button id="saveBtn" class="btn btn-default" onclick="saveSignature();" >Save Signature</button></p>

<div id="signature">

				<p><em>Your signature will appear here when you click "Save Signature"</em></p>

			</div>

</body>

</html>

截图

HTML5 canvas 在线涂鸦的更多相关文章

  1. HTML5 canvas 在线画笔绘图工具（一）

    HTML5 canvas 在线画笔绘图工具(一) 功能介绍 这是我用Javascript写的第一个程序,在写的过程中走了很多弯路,所以写完之后想分享出来,给与我一样的初学者做为学习的参考,同时在编写这 ...

  2. HTML5 canvas 在线画笔绘图工具（三）

    组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...

  3. html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. HTML5 canvas 在线画笔绘图工具（二）

    Canvas+Javascript 带图标的工具条制作 TToolbar 工具条是由一个TToolbar对象和两个按钮对象(TImageButton.TColorButton)组成,因为之前我大部分时 ...

  5. HTML5 canvas 在线画笔绘图工具（四）

    HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成. TDrawHandler需要完成以下工作 1.聚集类用于管理绘图的命令 TCommand 2.管理鼠标事件 ...

  6. html5 canvas 涂鸦画板

    html5 canvas 的涂鸦画板,可以加载图片进行涂鸦,也可以下载服务器使用的php上传的图片不能超过1M,只能是jpg或者png 格式的演示地址的服务器网速不怎么样,读取文件可能很慢,到达100 ...

  7. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  8. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  9. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

随机推荐

  1. 动态PHP电商网站伪静态的 Nginx反向代理Cache缓存终极设置

    转自: http://www.ttlsa.com/nginx/dynamic-php-nginx-cache/

  2. jsplumb 流程图，常用功能配置记录

    前言: jsplumb 有2个版本一个Toolkit Edition(付费版),另外一个就是Community Edition(社区版本).Toolkit Edition版本功能集成的比较丰富,社区版 ...

  3. 静态链表过程演示及代码实现(A - B) U (B - A)

    静态链表说明 使用数组来实现链式存储结构,目的是方便在不设指针类型的高级程序设计语言中使用链式结构 c语言定义数据结构 #define MAX_SIZE 1000 // 所有的类型都统一定义为Elem ...

  4. IBM.WMQ订阅主题，连续获取消息解决办法

    去队列里面一直获取消息,一开始想到了两种解决方案: 第一:订阅一次获取一次消息,正常的话每次都能获取到,但是要及时去清理订阅并且时间粒度不好控制 第二:订阅一次,再获取消息这里加死循环,超时MQ已经做 ...

  5. redis的发布与订阅机制

    Redis 发布/订阅机制原理分析 Redis 通过 PUBLISH. SUBSCRIBE 和 PSUBSCRIBE 等命令实现发布和订阅功能. 这些命令被广泛用于构建即时通信应用,比如网络聊天室(c ...

  6. 【转帖】循序渐进Oracle：数据库的字符集和字符集文件

    循序渐进Oracle:数据库的字符集和字符集文件 https://blog.csdn.net/Enmotech/article/details/100869162 2019年09月15日 18:23: ...

  7. 将 MathType 公式转换为 Word 自带公式

    以下操作是基于Office 365以及MathType 6.9b平台.有网友留言说第四步没出现「转换为 Office Math」选项,这个我就不清楚了,难道是只有Office 365才支持? 打开Ma ...

  8. LIUNX随堂学习-3 权限

    1.权限分为三类:读r,写w,执行x 2.读r:可以ls改目录下的子文件名,子目录名 写w:可以在该目录下创建.删除.重命名 执行x:可以cd到该目录下 3. ll  (ls -l) 下详细信息的意义 ...

  9. PAT(B) 1010 一元多项式求导（Java）

    题目链接:1010 一元多项式求导 代码 /** * Score 25 * Run Time 94ms * @author wowpH * @version 1.1 */ import java.ut ...

  10. nginx如何调用PHP(nginx+php运行原理)

    采用nginx+php作为webserver的架构模式,在现如今运用相当广泛.然而第一步需要实现的是如何让nginx正确的调用php.由于nginx调用php并不是如同调用一个静态文件那么直接简单,是 ...