SkyGrass
SkyGrass
  • 发布:2016-01-27 17:00
  • 更新:2020-06-16 14:06
  • 阅读:12811

关于H5电子签名的实现。

分类:MUI

最近一个项目需要客户在提交单据的时候,附带签名。度娘了一下。果然还是有这个JQuery插件的。学名:jSignature
好了,废话不多说。先来个截图(见附件)。这玩意功能还是比较强大的。支持各种设置和各种姿势的导出。可惜是在JQuery里的,得先引用JQuery.

                <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/jSignature.min.js"></script>  
        <!--[if lt IE 9]>  
        <script type="text/javascript" src="js/flashcanvas.js"></script>  
        <![endif]-->

下面就简单了,给一个dom.比如这样的:

<div id="signature" style="height: 100%;"></div>

最后呢,就是初始化一下。可以这样的:

$(document).ready(function() {  
                $("#signature").jSignature()  
            });

要是想导出呢,这里是Base64,就要这样的:

var datapair = $("#signature").jSignature("getData", "image");  
                var array = datapair.splice(",");  
                mui.toast(array[1]);

好了,其他也就没什么 了。更多了解就去看 api 吧。
最后在附上js包,希望对大家有帮助。

4 关注 分享
BoredApe Mirror Jenny 九六经筒

要回复文章请先登录注册

x***@163.com

x***@163.com

回复 半缕檀香 :
$("#signature").jSignature('init',{height:'150px',width:'100%'});
2020-06-16 14:06
1***@qq.com

1***@qq.com

怎么在vscode用mui
2020-06-09 14:55
x***@163.com

x***@163.com

楼主优秀,最近正好有这个需求
2020-06-08 15:45
sunway

sunway

回复 猪天天 :
var arguments = {
width: '100%',
height: '100%',
color:'#000',
"decor-color": "transparent",//去除默认画布上那条横线
lineWidth: '3'
};
$("#signature").jSignature(arguments);
2018-08-27 17:34
l***@163.com

l***@163.com

回复 猪天天 :
简单点就是把签名线的代码注释掉就行了。文档里面都没有写配置参数。。。
2018-06-28 15:32
猪天天

猪天天

签名的线怎么去掉啊
2017-09-11 17:55
l***@163.com

l***@163.com

$("#signature").jSignature('init',{height:'200px',width:'100%'});
2016-12-09 13:16
半缕檀香

半缕檀香

楼主知不知道怎么把签名框增高一些
2016-03-24 17:39
江户川林柯南

江户川林柯南

真不错,给楼主点个赞!
2016-02-25 13:52