jSignature签字板保存为图片
这是本人的第一篇博客,还不会使用。有些简陋,勿怪!
今天要讲的是使用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签字板保存为图片的更多相关文章
- ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
- Windows 保存BMP图片
在Windows下保存BMP图片还是挺方便的,直接上代码,拷贝就能用 void savebmp(uchar * pdata, char * bmp_file, int width, int heigh ...
- view保存为图片
一.概述 简书.微博.便签等都有将文章保存为图片的功能.笔者臆测,此功能的实现原理如下. 二.实现 2.1将View保存成Bitmap对象 方法1(亲测有效) private Bitmap makin ...
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...
- wordpress自动保存远程图片插件 DX-auto-save-images
wordpress自动保存远程图片插件DX-auto-save-images 解决了保存文章就可以自动将远程图片保存到你的服务器上了. 具体操作步骤如下: 1.安装启用wordpress自动保存远程图 ...
- 读取视屏文件,保存帧图片为ppm文件
ffmpeg跟sdl的学习过程:一.版本信息:ffmpeg-3.0.2.tar.bz2SDL2-2.0.4.tar.gz二.编译过程:1.ffmgeg的编译:./configure --enable- ...
- 在linux下实现用ffmpeg把YUV420帧保存成图片
在网上搜了很久相关的问题,但是好像没有一个在linux下跑得比较完整的例子,不过经过自己一番搜索和总结,终于做出来了,哈哈,看下面的代码吧. 这个例子可以保存成bmp或者jpeg格式的图片. 下面的结 ...
- .TextOut文字保存为图片
//Canvas.TextOut文字保存为图片 //Delphi开发案例精选,使用TextOut在画布上画图procedure TForm1.Button1Click(Sender: TObject) ...
- OpenGL中的深度、深度缓存、深度测试及保存成图片
1.深度 所谓深度,就是在openGL坐标系中,像素点Z坐标距离摄像机的距离.摄像机可能放在坐标系的任何位置,那么,就不能简单的说Z数值越大或越小,就是越靠近摄像机. 2.深度缓冲区 深度缓冲区原理就 ...
随机推荐
- Libev源码分析09:select突破处理描述符个数的限制
众所周知,Linux下的多路复用函数select采用描述符集表示处理的描述符.描述符集的大小就是它所能处理的最大描述符限制.通常情况下该值为1024,等同于每个进程所能打开的描述符个数. 增大描述符集 ...
- vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)
<template> <div class="card-index pt-relative"> <div id="wrapper ...
- tp5 字段验证表中是否唯一
namespace app\ps\validate; /** * 客户分类验证器 */ class CustomerCategory extends PsBase { // 验证规则 protecte ...
- uni-app学习记录03-路由跳转
<template> <view class="content"> <!-- v-show是相对于display: none --> <v ...
- tf.reduce_sum()函数
1234567reduce_sum 是 tensor 内部求和的工具.其参数中: input_tensor 是要求和的 tensor axis 是要求和的 rank,如果为 none,则表示所有 ra ...
- 2018-8-10-使用-RetroShare-分享资源
title author date CreateTime categories 使用 RetroShare 分享资源 lindexi 2018-08-10 19:16:51 +0800 2018-02 ...
- Roslyn 使用 Target 替换占位符方式生成 nuget 打包
本文告诉大家如何编写在编译过程修改打包文件 在项目文件的相同文件夹可以放一个 nuspec 用来告诉 VisualStudio 如何打包 现在尝试创建一个项目 NearjerbetearDeeyito ...
- C# 在基类定义好方法让子类继承接口就能实现
在 C# 里面,接口的定义只需要类里面存在和接口声明相同的方法或属性就可以,而存在的方法或属性是在子类定义的还是基类里面定义的都无所谓.也就是在基类里面写好了方法,但不继承接口,等子类继承接口的时候就 ...
- Linux 内核PCI去除一个驱动
去除一个驱动是一个非常容易的动作. 对于一个 PCI 驱动, 驱动调用 pci_unregister_driver 函数. 这个函数只调用驱动核心函数 driver_unregister, 使用 一个 ...
- Linux 内核管理类
一个类由一个 struct class 的实例来定义: struct class { char *name; struct class_attribute *class_attrs; struct c ...