dzqm

电子签名 js
授权协议 未知
开发语言 JavaScript
所属分类 程序开发、 其他开发相关
软件类型 开源软件
地区 国产
投 递 者 左丘成天
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

dzqm是一个支持pc、移动端与平板端使用的电子签名的js,支持webpack开发模式和传统开发模式。

源码说明

build 文件夹

放打包的js文件

example 文件夹

放例子的文件夹

src 文件夹

类的核心代码文件夹

class

我们这个类所需要的的所有类

base.js 基类

data.js 数据管理类

draw.js 绘制类

event.js 事件类

line.js 线条类

point.js 点类

image.js 管理图片加载的类

core

我们这个类的中心脚本

scss

样式文件夹目前没有写样式

untils

各种方法和工具

config.js 默认配置项

struct.js 没有使用到,结构字典表

untils.js 工具方法类

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"
    });

实例对象的时候可传入的参数

属性名称 描述 默认
ele 要挂载的节点 null
color 签名的颜色 '#333333'
lineWidth 签名的线宽 4
bgColor 签名的背景颜色 -1
pen 签名的笔类型可选择的值:'default' 'writing' 'default'
writingMaxLine 当笔是writing的时候我们来设置最大线宽 20
writingMinLine 当笔是writing的时候我们来设置最小线宽 10

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均可以
setPen 设置笔的类型 name:'default' 'writing'
addPen 新增笔的类型 name:笔的名称
url:笔需要的图片地址
penCall:笔需要的绘制回调
loadCall:笔需要的图片加载完成的回调函数
start:鼠标按下回调
move:鼠标移动回调函数
end:结束回调函数

添加笔的类型具体可参考代码

import penCall from "./../untils/penCall" //这里的文件可以打开查看
        main.addPen("default", "", penCall.default.penCall, function () {
            loadIndex++
            if (loadIndex === 2) {
                self.draw.unlock();
            }
        });
        main.addPen("writing", penUrl.writing, penCall.writing.penCall, function () {
            loadIndex++
            if (loadIndex === 2) {
                self.draw.unlock();
            }
        }, penCall.writing.start, penCall.writing.move, penCall.writing.end);

项目开源地址

开源地址:https://github.com/yinhui1129754/dzqm

运行项目

cnpm i
 npm run dev
 相关资料
  • 我的公司已经请求一个Java web服务实现,从PDF表单中提取数据,以启动使用Apache PDFBox的客户端操作的直通处理功能。很简单。困难的是,表格是由我公司的客户代表最终客户提交的,但最终客户的签名必须经过验证。 签署这些表格的商业案例是通过非正式的电子签名(湿签名的数字表示)过程,如奥多比阅读器中带有客户签名图像的签名“邮票”,或在iPad上的触摸屏绘图。到目前为止,我无法一致地验证这

  • 我已经创建了一个插件,它必须生成一个签名的PDF。在生成PDF之前,您需要在一个框中输入您的名字,并使用Pad绘制签名。 所以,我想做的是解决函数的错误,并正确地加载CSS&JS文件,然后单击转到页面,生成带有我在sign.php文件上所做签名的PDF文件。 这是sign.php文件的代码:

  • 我有一个web应用程序,我用它从用户那里收集一些信息(不是姓名或电子邮件),然后计划让他们通过DocuSign立即在线(不是通过电子邮件)以电子方式签署文档。 为了获得签名url(又名收件人视图),我似乎必须提供收件人的定义。“收件人”定义的一部分是用户名和电子邮件地址。这是真的吗? DocuSign API/SDK是否要求我提供最终用户(亦称签名者)的名称和电子邮件地址?如果我不提供这些东西,A

  • 问题内容: 我必须在电子邮件签名中包含一些图像(公司徽标等)。使用问题电子邮件系统生成的嵌入图像(通常以附件形式发送)和链接图像(需要获得许可才能在收到的电子邮件中显示它们)时,我遇到了各种各样的问题。 我刚刚从交易所收到了一些电子邮件,这些电子邮件具有徽标的base64图像表示形式,并使用标签进行显示。我正在寻找有关如何在可能的情况下通过电子邮件签名执行此操作的信息(我如何生成徽标的base64

  • 描述 资金方完成授信额度审批和放款操作后,会调用平台方预留的回调接口地址(预留回调地址请联系对接专员),将放款结果反馈给平台方。 为了防止重复记账,炼金台每次只回调一次,不论平台方是否接收,处理是否成功,均不再重复调用回调接口。(异常情况请通过 对账文件下载 接口进行处理。) API代码 loan_app:disb_info:feedback 请求参数 名称 类型 是否必须 描述 示例值 appI