支持多终端的电子签名(原创)

所属分类:输入-丰富的输入

 16708  228  查看评论 (43)
分享到微信朋友圈
X
支持多终端的电子签名(原创) ie兼容9

更新时间:2021-10-29 01:52:00

更新说明:

新增main参数 drawMode

main加入drawMode绘图模式0 以前的绘制模式 1线段会保留绘制的笔类型,已经绘制的线段不会跟着笔修改而修改

addPen加入参数 opt 这个参数是一个obj类型目前只有一个属性 drawLine 为了兼容drawMode值为1的时候绘制线段的函数

drawLine(c2d,line,main,penObj)函数的回调参数有

c2d绘制上线文,line用户操作的line线段数据,main核心对象main,penObj笔的数据结构

可以直接把以前的penCall里面绘制线段的方法复制到drawLine里面来 penCall保留是drawMode为0的时候绘制的值

在addPen中new Line对象的时候要加上main当前的笔类型 不然无法让笔的数据结构存在json中 这个只针对要使用drawMode为1的使用者并且有能力新增笔类型的开发者

addPen可以结合canvas提供的贝塞尔曲线 可以绘制出更像毛笔绘制的笔迹


更新时间:2021-07-08 00:09:38

更新说明:加入了新的配置参数

属性名称描述默认
bgImg背景图片元素 只能传Image对象 img节点 canvas节点null
bgImgDrawCall绘制的回调函数回调参数 ctx,img,mainnull

更新时间:2020-11-07 23:51:32

更新说明:过新增设置只读的方法setReadOnly 参数为true或者false,true表示只读,false表示不只读

新增判断是否签名的方法isEmpty 返回true表示是没有签名,返回false表示签名了


更新时间:2020-09-19 21:47:19

更新说明:新增clear方法,清除画布.修复获取元素位置的bug


更新时间:2020-08-25 00:26:41

更新说明:修复无法保存配置项的bug toJson无法保存一些配置项修复


更新时间:2020-08-16 22:58:43

更新说明:

新增构造函数的参数

pen签名的笔类型可选择的值:'default' 'writing''default'
writingMaxLine当笔是writing的时候我们来设置最大线宽20
writingMinLine当笔是writing的时候我们来设置最小线宽10

新增笔的概念

开放api可以让用户自定义笔

新增笔的详细说明可以看这个文档:

https://github.com/yinhui1129754/dzqm/blob/master/addPen.md

内置了两种笔

一种的默认笔 一种是毛笔类型

setPen设置笔的类型name:'default' 'writing'
addPen新增笔的类型可以看这个文档addPenname:笔的名称url:笔需要的图片地址penCall:笔需要的绘制回调loadCall:笔需要的图片加载完成的回调函数start:鼠标按下回调move:鼠标移动回调函数end:结束回调函数

更新时间:2020-03-02 23:46:00

项目说明 elesigncode

一个支持多终端的电子签名插件

webpack开发环境使用该插件

安装包

npm i elesigncode --save-dev

js代码

import EleSign from "elesigncode"
var ele = document.getElement("xxx");
var eleSign = new EleSign(); //实例化对象
eleSign.init(); //初始化
eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中

传统浏览器开发模式

先引入我们release\lib\dzjm.min.js到html页面中

然后js代码

var ele = document.getElement("xxx");
var eleSign = new EleSign(); //实例化对象
eleSign.init(); //初始化
eleSign.moutedEle(ele) //将签名节点放入到传入的element节点中

jq开发模式

首先在html中引入jq的脚本

接着引入我们release\lib\dzjm.min.js到html页面中

然后js代码

$.fn.EleSign = function(option) {
    this.each(function() {
        var eleSign = new EleSign(option); //实例化对象
        eleSign.init(); //初始化
        eleSign.moutedEle(this); //将签名节点放入到传入的element节点中
        //给节点扩展方法好获取电子签名实例对象
        this.getEleSign = function() {
            return eleSign;
        }
    });
    return this;
}
//这样我们就可以使用jq的方法来实例化我们的对象了
$("#xxx").EleSign({
    color: "#ccc"
});

new 对象的时候可传入的参数

属性名称描述
ele要挂载的节点
color签名的颜色
lineWidth签名的线宽
bgColor签名的背景颜色

EleSign对象主要方法说明

方法名称描述参数返回值
init初始化方法
moutedEle挂载到节点下ele:传入的节点
resize重置签名canvas节点大小到挂载节点的大小,一般可以和resize混合使用
resizeWithNumber重置签名canvas节点大小到传入的宽度和高度w:宽度,h:高度
destory销毁对象:实例的对象的所有属性没有了事件取消绑定,canvas节点从挂载节点移出
drawEle强制重新绘制数据
undo撤销方法
redo重做方法
toJson将当前实例签名的数据转化为json
jsonTo将传入的json数据转化到当前对象json
toPng获取当前签名的base64位数据png类型
toJpeg获取当前签名的base64位数据jpeg类型
setColor设置签名的颜色color:颜色字符串rgb hex均可以
setLineWidth设置线宽lineWidth:线宽
setBgColor设置背景颜色bgColor:颜色字符串rgb hex均可以


相关插件-丰富的输入

jQuery H5电子签名

H5电子签名demo,支持移动端
  丰富的输入
 52594  432

Javascript模拟键盘事件

Javascript模拟键盘事件 可对应键盘每一个键
  丰富的输入
 32749  319

jQuery在线做试卷并查看答案

jQuery在线试卷,提交后查看答案、解析。题型包括 1单选2多选3判断4填空5问答8论述题6完型填空7阅读理解
  丰富的输入
 33933  358

实现打字机效果

封装好的方法实现打字机效果兼容ie6
  丰富的输入
 23706  355

讨论这个项目(43)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    周谊军 0
    2022/12/11 14:02:40
    怎么判断他签名没有呢,如果没有写签名不让他生成签名图片?
        0
        2022/12/12 19:18:38
        isEmpty 方法可以判断
    回复
    ♌ Amber 0
    2022/9/29 17:47:24
    你好, 签名的改变签名大小功能resizeWithNumber怎么使用呢, 我签名之后,需要把签名大小设置一下,因为图片会显示在word当中 回复
    张铭标 0
    2022/5/23 11:30:22
    这个微信小程序适用吗,有demo吗
        0
        2022/5/23 19:49:11
        应该不适用
    回复
    mikasa。 0
    2021/1/28 14:58:38
    大佬,clear好像用不了😡
        1
        2021/1/30 8:58:33
        var m = new EleSign({
            ele: null
        });
        m.init();
        clearDiv.addEventListener("click", function() {
            m.clear()
        })

        测试了呀 这样可以清楚呀
        你是不是在vue中使用呀? vue中使用只需要拿到这个m对象也可以清除的

    回复
    ζ╊墨染流年╂ 0
    2020/12/23 17:57:35
    angular能用吗
        0
        2020/12/25 15:13:25

        可以 这是一个原生js编写的 你可以自己对其进行封装 具体可以看git有详细文档

        https://github.com/yinhui1129754/elesigncode

        这里是对vue进行的封装 angular 也可以进行类似的封装就可以使用了

        https://github.com/yinhui1129754/elesigncode/blob/master/src/core/elesigncode.vue
    回复
    山鲁佑德 0
    2020/9/18 15:33:43
    为什么没法清除画布
        0
        2020/9/19 12:29:53
        正在加
    回复
    GodLike 0
    2020/8/4 11:37:46
    博主 你好,我签名画板上面还有一个文本框,需要输入内容。如果我先输入了内容,再去签名,会一直弹出输入键盘。如何能在签名的时候将文本框失去焦点。
        0
        2020/8/4 13:29:28
        发下界面截图给我看看
        0
        2020/8/4 13:31:00
        直接发你的代码吧 这个评论貌似不支持截图
        GodLike0
        2020/8/4 13:54:42
        <div id="divhandleDesc">
            <p id="auditDesc">填写审批意见:
        </div>
        <div id="divMyCanvas">
            <p id="auditSign">电子签名:
                <div>
                    <div id="myCanvas" class="canvas"></div>
                </div>
                <div id="image"></div>
        </div>
        <div id="diva" style="margin-top: 30px;" align="center">
            <a class="form-item-button2" onclick="signFinish(1)" style="padding: 10px 80px;font-size: 20px;">同 意</a>
            </br>
            </br>
            </br>
            <a class="form-item-button2" onclick="signFinish(0)" style="padding: 10px 24px;font-size: 20px;">退 回</a>
            <a class="form-item-button2" onclick="clearCanvas()" style="padding: 10px 15px;font-size: 20px;">撤销签名</a>
        </div>
        <div id="divClose" style="margin-top: 30px;display: none;" align="center">
            <a class="form-item-button2" onclick="exitSign()" style="padding: 10px 24px;font-size: 20px;">退 出</a>
        </div>
        0
        2020/8/4 15:00:07
        你直接加我q375361172吧 我估计是样式问题
        GodLike0
        2020/8/4 15:14:15
        感谢博主
        默然1
        2020/12/11 12:00:29

        加一段JS消去焦点就OK了,

        <div id="myCanvas" class="canvas"></div>
        <script type="text/javascript">
        let box = document.querySelector('.canvas');
                   box.addEventListener("touchstart",(e)=>{
                    document.activeElement.blur();
                   });
        </script>
    回复
    gn017566 0
    2020/7/14 16:58:40
    jsonTo 呃?是要?甚?咄去!?
    我把toJson斤的JSON 傥上去 ?出?邋锗
    Cannot read property 'length' of undefined
        gn0175660
        2020/7/14 17:00:24
        jsonTo 是要传怎么样的JSON进去?
        我把toJson给的JSON传进去却会出错~
        Cannot read property 'length' of undefined
        gn0175660
        2020/7/15 11:31:00
        原来是我没把sting型态的json 转成json型态 谢谢拉~
        0
        2020/7/15 17:28:44
        好尴尬
    回复
    ?? 0
    2020/7/7 9:19:26
    打包成ipad使用有时候会发现签不了字的情况 清除一下后台就好了... 您遇到过这个情况么
        0
        2020/7/8 9:24:26
        ???清除后台????什么意思 是清除缓存吗?
    回复
    ___越狱者___ 0
    2020/7/1 13:12:36
    可以横屏签名吗
        1
        2020/7/2 13:14:56
        把装canvas的div设置为最大就可以了呀 因为最终生成的是图片所以不存在什么横屏竖屏 只有宽度和高度 即签名区域
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复