js实现电子签名功能

一：elesigncode拓展包下载

1：github地址：https://github.com/yinhui1129754/elesigncode

2：npm下载：

npm install elesigncode

二：elesigncode常用方法

方法名称	描述	参数	返回值
init	初始化方法	无	无
undo	撤销方法	无	无
redo	重做方法	无	无
toJson	将当前实例签名的数据转化为json	无	无
toPng	获取当前签名的base64位数据png类型	无	无
toJpeg	获取当前签名的base64位数据jpeg类型	无	无
setColor	设置签名的颜色	color:颜色字符串rgb hex均可以	无
setLineWidth	设置线宽	lineWidth:线宽	无
setBgColor	设置背景颜色	bgColor:颜色字符串rgb hex均可以	无
setPen	设置笔的类型	name:'default' 'writing'	无
clear	清除签名	无	无
isEmpty	获取是否签名了	无	返回true表示是没有签名，返回false表示签名了

三：elesigncode实现实例

1：html

<div id="test" style="width: 60%;height: 500px;margin: auto;border: 1px solid #333">
</div>
<button id="undo">撤销</button>
<button id="clear">清除</button>
<button id="getJson">获取json</button>
<button id="downloadPng">获取透明图片</button>
<button id="downloadJpeg">获取不透明图片</button>

2：js

<script type="text/javascript" src="./release/lib/dzjm.min.js"></script>
<script>var ele = document.getElementById("test");var eleSign = new EleSign({ele: null});//实例化对象eleSign.init(); //初始化eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中eleSign.setPen("default");//设置签名样式：default(默认样式),writing(毛笔样式)eleSign.setColor('#f00');//设置签名颜色eleSign.setBgColor('#333');//设置背景颜色//将当前实例签名的数据转化为jsondocument.getElementById("getJson").addEventListener("click", function () {var jsonStr = eleSign.toJson();console.log(jsonStr);alert(jsonStr);})//下载pngdocument.getElementById("downloadPng").addEventListener("click", function () {if (eleSign.isEmpty() === false) {var baseUrl = eleSign.toPng();var a = document.createElement("a");document.body.appendChild(a);a.setAttribute("href", baseUrl);a.setAttribute("download", "png图片");a.click();document.body.removeChild(a);} else {alert('请签名')}})//下载jpegdocument.getElementById("downloadJpeg").addEventListener("click", function () {if (eleSign.isEmpty() === false) {var baseUrl = eleSign.toJpeg();var a = document.createElement("a");document.body.appendChild(a);a.setAttribute("href", baseUrl);a.setAttribute("download", "jpeg图片");a.click();document.body.removeChild(a);} else {alert('请签名')}})//撤销document.getElementById("undo").addEventListener("click", function () {eleSign.undo();})//清除document.getElementById("clear").addEventListener("click", function () {eleSign.clear();})
</script>

如上我们就可以实现电子签名功能了

js实现电子签名功能相关推荐

web 前端签名插件_signature_pad插件实现电子签名功能
其实针对普通电子签名的话,直接下载这个插件打开里面的docs文件引入js,css和index直接运行就是一个电子签名面板了,很实用,功能和性能都是比较好的,插件地址szimek/signature_p ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
JS实现sleep功能 JS遍历document对象
标题:JS实现sleep功能 JS遍历document对象/*****************************************/ var elementName; function c ...
JS全选功能代码优化
JS全选功能代码优化原文:JS全选功能代码优化 JS全选功能代码优化最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之 ...
用统计功能计算机计算js,js实现计算器功能
本文实例为大家分享了js实现计算器功能的具体代码,供大家参考,具体内容如下知识点 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 代码如下 js计算器计算器 .h ...
【chorme插件开发】第五节：纯js实现的功能插件实例
纯js实现的功能插件插件结构: bg.js manifest.json manifest.json文件配置 { "manifest_version":2, "name& ...
【chorme插件开发】第四节：html+js实现的功能插件开发实例
###html+js实现的功能插件开发实例插件结构 icon.pngpopup.htmlpopup.jsmanifest.json manifest.json文件配置 { "manifes ...
html实现验证码效果,js实现验证码功能
本文实例为大家分享了js实现验证码功能的具体代码,供大家参考,具体内容如下 #前面是拆解着讲的,不想看可以直接跳过,带注释的完整版代码和效果在后面首先在页面中准备一个输入框,一个显示验证码的盒子和一 ...
HTML+CSS+JS实现计算机功能
本文运用前端代码实现一个简单的计算器界面,并通过JS实现了基本的运算功能.(加.减.乘.除.清屏/退格.取余.取倒) 需要源代码的可以加下面的QQ群,里面有各种学习资料,期待大家的加入! 点我进群 ...
node.js 框架基本功能
这个框架从2018年1月左右开始开发,主要参考资料是<Nodejs:摆脱黑工坊发展出一款基础企业级框架>和阿里开源的 egg.js ,核心库是 koa@2.一开始用一两周的时间开发了原型, ...

js实现电子签名功能

一：elesigncode拓展包下载

二：elesigncode常用方法

三：elesigncode实现实例

1：html

2：js

js实现电子签名功能相关推荐

最新文章

热门文章