插件地址

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. checkbox 在移动端显示为小圆圈问题

    在desktop显示正常,但是在移动端显示变为小圆圈,无法正确展示选中取消选中效果问题解决方案: display: block; width: 58px; height: 20px; -webkit- ...

  2. Core Data 多表关联

    1.概念简介 coreData中存在复杂的数据关系时,一张表难以满足需求,此时就需要了解使用coreData多表的关联使用. 如 课程表 和 章节表 的关系:一个课程跟章节的对应关系是 一对多,单一个 ...

  3. 容器版单个jenkins实现CI/CD----带solo博客开源项目

    实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.docker-1.7 192.168.0.98 harbor.docker-1.7集群 jenkins安装 ...

  4. [CareerCup] Single Valid Tree

    https://www.careercup.com/question?id=5103530547347456 Given a list of nodes, each with a left child ...

  5. 华为eNSP上的NAT地址转换配置

    NAT是将IP数据报文报头中的IP地址转换为另一个IP地址的过程,主要用于实现内部网络(私有IP地址)访问外部网络(公有IP地址)的功能. 1.实验拓扑 地址表: 1.完成各个接口基本配置之后使用pi ...

  6. linux网卡出现问题：Job for network.service failed because the control process exited with error code问题

    [转自]:https://blog.csdn.net/dongfei2033/article/details/81124465 今天在centOS 7下更改完静态ip后发现network服务重启不了, ...

  7. Sql server 中count() 与 sum() 的区别

    一句话概括就是Sum(列) 是求和,把所有列的值进行汇总求和:COUNT(列) 是行数汇总,只要列的值不为Null,就会增加1: 举个例子说明下: --创建临时表结构 CREATE TABLE Tem ...

  8. Redis 5.0.5 Install manual

    Redis 5.0.5 安装文档(Install manual) 一.单实例安装 标题 内容 测试环境 Centos 7 虚拟机 vbox redis版本 redis 5.0.5 1.编译安装redi ...

  9. Spring Boot-日志配置(超详细)

    Spring Boot-日志配置(超详细) 更新日志: 20170810 更新通过 application.yml传递参数到 logback 中. Spring Boot-日志配置超详细 默认日志 L ...

  10. java源码 -- AbstractSet

    AbstractSet抽象类属于Set集合分支的顶层类,它继承了AbstractCollection,实现了Set接口. public abstract class AbstractSet<E& ...