这是本人的第一篇博客，还不会使用。有些简陋，勿怪！

今天要讲的是使用jquery插件jSignature做一个手写板签字的功能，并将签字笔迹保存为图片。

第一步：环境准备

　　jquery、jSignature

第二步：demo编写

　　

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>手写板签名demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
</head>
<body>
	<div id="signature"></div>
	<p style="text-align: center">
		<b style="color: red">请按着鼠标写字签名。</b>
	</p>
	<input type="button" value="保存" id="yes"/>
	<input type="button" value="下载" id="download"/>
	<input type="button" value="重写" id="reset"/>
	<div id="someelement"></div>
	<script src="jquery-2.0.3.min.js"></script>
	<!--[if lt IE 9]>
        <script src="jSignature/flashcanvas.js"></script>
	<![endif]-->
	<script src="jSignature/jSignature.min.js"></script>
	<script>
		$(function() {
			var $sigdiv = $("#signature");
			$sigdiv.jSignature(); // 初始化jSignature插件.
			$("#yes").click(function(){
				//将画布内容转换为图片
				var datapair = $sigdiv.jSignature("getData", "image");
				var i = new Image();
				i.src = "data:" + datapair[0] + "," + datapair[1];
				$(i).appendTo($("#someelement")); // append the image (SVG) to DOM.
			});
			//datapair = $sigdiv.jSignature("getData","base30");
			//$sigdiv.jSignature("setData", "data:" + datapair.join(","));
			$("#download").click(function(){
				downloadFile("a.png", convertBase64UrlToBlob($("img").attr("src")));
			});
			$("#reset").click(function(){
				$sigdiv.jSignature("reset"); //重置画布，可以进行重新作画.
				$("#someelement").html("");
			});
		});
		function downloadFile(fileName, blob){
			var aLink = document.createElement('a');
			var evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错, 感谢 Barret Lee 的反馈
			aLink.download = fileName;
			aLink.href = URL.createObjectURL(blob);
			aLink.dispatchEvent(evt);
		}
		/**
		 * 将以base64的图片url数据转换为Blob
		 * @param urlData
		 *            用url方式表示的base64图片数据
		 */
		function convertBase64UrlToBlob(urlData){

			var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte

			//处理异常,将ascii码小于0的转换为大于0
			var ab = new ArrayBuffer(bytes.length);
			var ia = new Uint8Array(ab);
			for (var i = 0; i < bytes.length; i++) {
				ia[i] = bytes.charCodeAt(i);
			}

			return new Blob( [ab] , {type : 'image/png'});
		}
	</script>

</body>
</html>

　第三步：测试

　　经测试，成功！

jSignature签字板保存为图片的更多相关文章

  1. ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法

    记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...

  2. Windows 保存BMP图片

    在Windows下保存BMP图片还是挺方便的,直接上代码,拷贝就能用 void savebmp(uchar * pdata, char * bmp_file, int width, int heigh ...

  3. view保存为图片

    一.概述 简书.微博.便签等都有将文章保存为图片的功能.笔者臆测,此功能的实现原理如下. 二.实现 2.1将View保存成Bitmap对象 方法1(亲测有效) private Bitmap makin ...

  4. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  5. wordpress自动保存远程图片插件 DX-auto-save-images

    wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...

  6. 读取视屏文件，保存帧图片为ppm文件

    ffmpeg跟sdl的学习过程:一.版本信息:ffmpeg-3.0.2.tar.bz2SDL2-2.0.4.tar.gz二.编译过程:1.ffmgeg的编译:./configure --enable- ...

  7. 在linux下实现用ffmpeg把YUV420帧保存成图片

    在网上搜了很久相关的问题,但是好像没有一个在linux下跑得比较完整的例子,不过经过自己一番搜索和总结,终于做出来了,哈哈,看下面的代码吧. 这个例子可以保存成bmp或者jpeg格式的图片. 下面的结 ...

  8. .TextOut文字保存为图片

    //Canvas.TextOut文字保存为图片 //Delphi开发案例精选,使用TextOut在画布上画图procedure TForm1.Button1Click(Sender: TObject) ...

  9. OpenGL中的深度、深度缓存、深度测试及保存成图片

    1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就 ...

随机推荐

  1. @noi.ac - 508@ 01背包

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 有一天你学了一个能解决01背包问题的算法,你决定将这个算法应用到 ...

  2. linux lvm删除导致无法启动

    要想编辑/etc/fstab文件,我们需要在系统中重新挂载根目录,使其具有可读写状态,使用如下命令: mount -o remount,rw / 该条命令的作用是,以可读写的形式重新挂载根分区. 然后 ...

  3. ThinkPHP3.2版本安全更新

    近日我们收到了一个关于3.2版本的漏洞提醒,官方已经第一时间进行处理和更新.由于3.2版本已经过了官方的维护和安全更新周期,而且大量的开发者也进行了二次开发,因此不再发布新版,官方仅进行安全公告和修复 ...

  4. Python--day62--使用Bootstrap样式的出版社

    没有使用之前: 使用Bootstrap样式之后:

  5. H3C PPP的特点

  6. html(二)登陆页面

    今天开始正常上课学习HTML+CSS+JSP  嗯 前两个没讲直接上手! 老师也是很认同我们的呢~ 这是第一个案例 做一个登陆页面,并利用post提交表单 传值到另一个界面接收值. 1.设置值: &l ...

  7. java接口和抽象类的比较

    相同点: 都位于继承的顶端,用于被其他实现或继承; 都不能实例化; 都包含抽象方法,其子类都必须覆写这些抽象方法;   区别: 抽象类为部分方法提供实现,避免子类重复实现这些方法,提供代码重用性;接口 ...

  8. js基础-原型

    1.定义:我们创建的函数都有一个prototype(原型)属性,该属性是一个对象,          原型模式声明中多了两个属性(自动生成). 构造函数:       function Box(nam ...

  9. linux 运行处理者

    如同前面建议的, 当内核收到一个中断, 所有的注册的处理者被调用. 一个共享的处理者 必须能够在它需要的处理的中断和其他设备产生的中断之间区分. 使用 shared=1 选项来加载 short 安装了 ...

  10. vue权限控制菜单显示

    对于不同角色显示不同的菜单 思路1: 本地放一份完整的菜单数据,通过后台返回角色的菜单列表两者对比,筛选需要显示的菜单数据绑定,这里有个问题就是路由vue实例初始化就生成了,加载的全部,人为输入地址是 ...