文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

基于JavaScript实现电子签名功能

2022-11-13 19:18

关注

一: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');//设置背景颜色
 
    //将当前实例签名的数据转化为json
    document.getElementById("getJson").addEventListener("click", function () {
        var jsonStr = eleSign.toJson();
        console.log(jsonStr);
        alert(jsonStr);
    })
 
    //下载png
    document.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('请签名')
        }
 
    })
 
    //下载jpeg
    document.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>

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

到此这篇关于基于JavaScript实现电子签名功能的文章就介绍到这了,更多相关JavaScript电子签名内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯