pc端，使用jsignature，实现签名功能

遇到一个需求，PC端用鼠标签名，还要有撤回功能、重置功能，最后要转换成base64格式的图片,找了很久插件，最后还是决定使用jsignature-master插件完成

下载网址：jQuery手写签名插件jSignature

代码实现：

创建对应的div

  <divid="signture"style="border: 1px solid #4587ff;height: 190px;margin-left: 37px;margin-right: 32px;position: relative;margin-top: 10px;"><div id="btn" style="position: absolute; right: 9px; bottom: 8px"><buttonclass="reset"id="reset"style="background: #fff; border: none"><imgsrc="./images/reset.png"alt=""style="height: 18px; width: 18px"/></button></div></div>

对应的js代码

 <script src="./libs/jSignature.min.js"></script><script>$("#signture").jSignature({width: "100%", //签名区域的宽height: "100%", //签名区域的高cssclass: "zx11", //画布的类 可以写自定义的样式UndoButton: true, //撤销按钮的状态 这个按钮的样式修改要去jSignature.js文件中去找signatureLine: false, //去除默认画布上那条横线lineWidth: "2", //画笔的大小color: "#333333", //画笔的颜色});
</script>

这样简单的画布就好了

因为回退功能是自带的所以直接用就好了，因为样式很丑，所以要自己修改这个回退按钮的样式，回退样式需要到jsignature.js里面去修改

$.fn.jSignature("addPlugin", "instance", "UndoButton", function (k) {this.events.subscribe("jSignature.attachingEventHandlers", function () {if (this.settings[k]) {var g = this.settings[k];"function" !== typeof g &&(g = function () {var g = $('<button class="withdraw" id="withdraw" style="position: absolute;right: 38px; bottom: -6.5px;background:#fff;border: none;"><img src="./images/withdraw-blue.png" alt="" style="height: 18px;width: 18px;"></button>').appendTo(this.$controlbarLower),k = g.width();k !== g.width() && g.width(k);return g;});t.call(this, g, "jSignature", k);}});})// 在引入的js文件中找到这一段代码，我引入的是jSignature.min.js，上面的button按钮就是回退按钮，修改成自己需要的样式就好了

重置功能使用插件定义的方法调用reset就好

$("#reset").click(function () {var $signArea = $("#signture");//重置$signArea.jSignature("reset");});

最后要生成base64的的图片

如下：

 $("#sure").click(function () {if ($("#signture").jSignature("getData", "native").length === 0) {alert("请签名后再提交！");return;}var datapair = $("#signture").jSignature("getData", "image");var i = new Image();i.src = "data:" + datapair[0] + "," + datapair[1];console.log(i);});

注：第一次写，本来想放图片的，结果图片上传不了。。不对的地方欢迎大家提出来。。谢谢

pc端，使用jsignature，实现签名功能相关推荐

jQuery实现PC端商城购物车模块基本功能（每个商品的小计和合计都会根据添加和删除的操作来动态计算）
jQuery实现PC端商城购物车模块基本功能先上效果图: 因为主要是想练习jQuery的使用,所以页面CSS部分比较简陋,有需要的话,大家在参考代码时,可以自己再完善下CSS部分的代码,让购物车页面 ...
微信PC端各个数据库文件结构与功能简述 - Multi文件夹
异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章仅在CSDN.掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是 ...
微信PC端各个数据库文件结构与功能简述 - 根目录
异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复:本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告.本人所有文章仅在CSDN.掘金和个人博客(一定是异想之旅域名)发布,除此之外全部是 ...
html 手机复制到剪贴板,移动端和pc端的复制到剪贴板功能
一.Document.execCommand() 1.移动端复制 html结构礼包码: 复制 js代码 if(!isPC){ $('.helper-box').on('click','.gift-c ...
pc端VUE实现一键复制内容功能
接到一个需要,需要在pc端实现一键复制粘贴功能,如图所示: 当我点击复制按钮时,会提示"复制成功",这样复制的内容就可以在其他地方使用了具体实现方法如下: 我写了一个公共的方法 ...
Java SpringMVC实现PC端网页微信扫码支付完整版
一:前期微信支付扫盲知识前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微 ...
商城模板网站html5手机端_网站建设中，pc端与手机移动端设计一样吗
在过去几年中,企业做网站建设基本都是做pc端的网站,原因就是pc端的网页界面显示的更多,可以对企业想要展示的图片进行更合理的布局展示.而这些年,手机逐渐智能化,很多人几乎已经脱离了电脑只使用手机,在这 ...
auto.js id为参数滑动_【Autojs教程】02Autojs PC端开发调试环境搭建
[Autojs教程]02-Autojs PC端开发调试环境搭建写在前面本篇教程算是保姆级教程了,希望以此能吸引更多感兴趣的同学学习Autojs,也希望大家能因此碰撞出更多的奇思妙想关注微信公众号 ...
玩客云pc端_玩客云pc端
<玩客云pc端>是一款功能全面的云盘共享工具,拥有畅快下载.随存随取.文件管理.远程操控.多媒体娱乐等多种实用功能,是一款专为年轻人而设计的私人云盘,为您提供高品质数字娱乐生活.访问玩客云 ...
完美实现PC端软件控制手机（无需安装任何APK）(一)
(需要了解开发细节和demo的朋友可以私信我或者加微信Kingthink) 一.背景有一天,手机屏幕摔坏掉,我只能看那寥寥可数的开机.Power键,欲哭无泪, 我想要有一款PC端控制软件在必要时就能 ...

pc端，使用jsignature，实现签名功能

pc端，使用jsignature，实现签名功能相关推荐

最新文章

热门文章