如何在电子文档上签名

如何在电子文档上签名 html5实现手写签名板，用于电子文档签名 千次阅读

2021-04-01 14:53:59

直接上代码：

<!DOCTYPE html>
<!-- saved from url=(0056)http://hao2013.cn/canvas-special-master/brush/index.html -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="icon" href="yiyuan.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="yiyuan.ico" type="image/x-icon"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>电子签名</title>
</head>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .canvas {
        /*width: 100%;*/
        display: block;
        border: 1px solid red;
    }
    #clear {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 20px auto;
        cursor: pointer;
    }
 
    #save {
        margin: 0 auto;
        display: inline-block;
        padding: 5px 10px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid #eee;
        background: #e1e1e1;
        border-radius: 10px;
        text-align: center;
        margin: 20px auto;
        cursor: pointer;
 
    }
</style>
<input type="hidden" id="tjbh" value="${tjbh}">
<input type="hidden" id="signType" value="${signType}">
<body data-ext-version="1.4.2">
<div style="text-align: center">
<canvas id="canvas" width="400" height="200" style="border:1px solid #000000;">
    您的浏览器不支持canvas技术,请升级浏览器!
</canvas>
<div>
    <span id="clear">清空签名板</span>
    <span id="save">保存签名</span>
</div>
</div>
</body>
<script type="text/javascript">
    function WriteFont(id, options) {
        var self = this;
        this.canvas = document.getElementById(id);
        var obj = {
            canvas: this.canvas,
            context: this.canvas.getContext("2d"),
            isWrite: false, //是否开始
            lastWriteTime: -1,
            lastWriteSpeed: 0,
            lastWriteWidth: 0,
            canvasWidth: 400, //canvas宽高
            canvasHeight: 200,
            isShowBorder: true, //是否显示网格
            bgColor: '#fff', //背景色
            borderWidth: 2, // 网格线宽度
            borderColor: "#fff", //网格颜色
            lastPoint: {}, //
            writeWidth: 2, //基础轨迹宽度
            maxWriteWidth: 30, // 写字模式最大线宽
            minWriteWidth: 1, // 写字模式最小线宽
            writeColor: '#000', // 轨迹颜色
            isWriteName:false //签名模式
        }
 
        for(var name in options) {
            obj[name] = options[name];
        }
 
        /**
         * 轨迹宽度
         */
        this.setLineWidth = function() {
            var nowTime = new Date().getTime();
            var diffTime = nowTime - obj.lastWriteTime;
            obj.lastWriteTime = nowTime;
            var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;
            if(returnNum < obj.minWriteWidth) {
                returnNum = obj.minWriteWidth;
            } else if(returnNum > obj.maxWriteWidth) {
                returnNum = obj.maxWriteWidth;
            }
 
            returnNum = returnNum.toFixed(2);
//写字模式和签名模式
            if(obj.isWriteName){
                obj.context.lineWidth = obj.writeWidth;
            }else{
                obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;
            }
        }
 
        /**
         * 绘制轨迹
         */
        this.writing = function(point) {
            obj.context.beginPath();
            obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);
            obj.context.lineTo(point.x, point.y);
            self.setLineWidth();
            obj.context.stroke();
            obj.lastPoint = point;
            obj.context.closePath();
        }
 
        /**
         * 轨迹样式
         */
        this.writeContextStyle = function() {
            obj.context.beginPath();
            obj.context.strokeStyle = obj.writeColor;
            obj.context.lineCap = 'round';
            obj.context.lineJoin = "round";
        }
 
        /**
         * 写开始
         */
        this.writeBegin = function(point) {
            obj.isWrite = true;
            obj.lastWriteTime = new Date().getTime();
            obj.lastPoint = point;
            self.writeContextStyle();
        }
 
        /**
         * 写结束
         */
        this.writeEnd = function() {
            obj.isWrite = false;
        }
 
        /**
         * 清空画板
         */
        this.canvasClear = function() {
            obj.context.save();
            obj.context.strokeStyle = '#fff';
            obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);
            if(obj.isShowBorder && !obj.isWriteName) {
                obj.context.beginPath();
                var size = obj.borderWidth / 2;
//画外面的框
                obj.context.moveTo(size, size);
                obj.context.lineTo(obj.canvasWidth - size, size);
                obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);
                obj.context.lineTo(size, obj.canvasHeight - size);
                obj.context.closePath();
                obj.context.lineWidth = obj.borderWidth;
                obj.context.strokeStyle = obj.borderColor;
                obj.context.stroke();
//画里面的框
                obj.context.moveTo(0, 0);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight / 2);
                obj.context.lineTo(0, obj.canvasHeight);
                obj.context.lineTo(obj.canvasWidth, 0);
                obj.context.lineTo(obj.canvasWidth / 2, 0);
                obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);
                obj.context.stroke();
 
            }
            obj.context.restore();
        }
 
        /**
         * 保存图片 格式base64
         */
        this.saveAsImg = function() {
            var image = new Image();
            image.src = this.canvas.toDataURL("image/png");
            if(image.src == this.emptyCanvas) {
                alert('请先签名')
                return;
            }
            if(!confirm("你确定提交当前的签名吗?")){
                console.log("你确定提交当前的签名吗?-->NO");
                return;
            }
            var base64Image=image.src;
            console.log('提交的内容===>', image.src)
            var params={
                "tjbh":jQuery("#tjbh").val(),
                "signType":jQuery("#signType").val(),
                "picture":base64Image
            }
            jQuery.ajax({
                url:"autoGraphAction_index_submitSign.do",
                type:"post",
                data:params,
                dataType:"json",
                success:function(data){
                    //alert("data:"+JSON.stringify(data))
                    if(data.code!=200){
                      alert(data.message);
                      return;
                    }
                    alert(data.message);
                },
                error:function(data,textStatus){
                    alert("网络连接错误，请稍后再试!");
 
                }
            });
 
        };
 
        /**
         * 初始化画板
         */
        this.canvasInit = function() {
            this.canvas.width = obj.canvasWidth;
            this.canvas.height = obj.canvasHeight;
            this.emptyCanvas = this.canvas.toDataURL("image/png");
        }
 
        /**======================事件绑定===========================**/
 
        this.canvas.addEventListener('mousedown', function(e) {
            var point = {
                x: e.offsetX || e.clientX,
                y: e.offsetY || e.clientY
            };
            self.writeBegin(point);
        });
 
        this.canvas.addEventListener('mouseup', function(e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });
 
        this.canvas.addEventListener('mouseleave', function(e) {
            var point = {
                x: e.offsetX,
                y: e.offsetY
            };
            self.writeEnd(point);
        });
 
        this.canvas.addEventListener('mousemove', function(e) {
            if(obj.isWrite) {
                var point = {
                    x: e.offsetX,
                    y: e.offsetY
                };
 
                self.writing(point);
            }
        });
 
//移动端
        this.canvas.addEventListener('touchstart', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX || touch.clientX,
                y: touch.pageY || touch.clientY
            };
            self.writeBegin(point);
        });
        this.canvas.addEventListener('touchend', function(e) {
            var touch = e.changedTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('touchmove', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writeEnd(point);
        });
        this.canvas.addEventListener('touchmove', function(e) {
            var touch = e.targetTouches[0];
            var point = {
                x: touch.pageX,
                y: touch.pageY
            };
            self.writing(point);
        });
 
        this.canvasInit();
        this.canvasClear();
 
        this.option = obj;
        obj.control = {
            clearCanvas: self.canvasClear
        };
    }
 
    /**
     * 初始化调用
     * 设置参数
     */
    var writeCanvas = new WriteFont('canvas', {
        borderWidth: 10,
        writeWidth:3,
        borderColor: '#ff6666',
        isWriteName:true //签名模式
    });
 
    document.getElementById('clear').onclick = function() {
        writeCanvas.option.control.clearCanvas();
    };
 
    document.getElementById('save').onclick = function() {
        writeCanvas.saveAsImg()
    };
</script>
</html>

html代码，直接使用H5自带的canvas，无需引入js

更多相关内容

如何直接在电子文档上签名？
万次阅读 2018-12-26 14:54:11

在日常的办公学习中，我们经常要接触到PDF文档，特别是当我们需要对一份电子档进行签名时，很多时候操作都是把文件打印出来，签名后再扫描成电子档，这样做实在太麻烦了，有没有更加简便的方法呢？如下小编教大家一...

在日常的办公学习中，我们经常要接触到PDF文档，特别是当我们需要对一份电子档进行签名时，很多时候操作都是把文件打印出来，签名后再扫描成电子档，这样做实在太麻烦了，有没有更加简便的方法呢？

如下小编教大家一招，可以实现快速签名哦。

第一步：点击主页—PDF签名

第二：点击“+”，创建签名，可以选择创建方式，如下示例的是输入签名的用法，如图点击输入签名，然后输入签名的文本，选择需要的字体，点击确定即可。

第三：点击确定后，鼠标会变成签名的字样，选中需要的位置，点击签名即可固定在位置上。

第四：选中签名，点击右键，即可对签名进行其他操作。

以上的教程学会了吗？

有小伙伴就在问小编，说自己的PDF文档是扫描件的，老板已经签完字确认了。现在老板需要在文件的基础上再修改内容，那如何修改呢？

小编也很困惑，因为扫描件的PDF本身就是图片格式的，无法直接编辑的。不过小编有一个办法，既然要重新修改内容，倒不如直接把PDF文档转换成可编辑的word文档，那编辑起来就更加便捷了。

在这里小编给大家推荐一款非常好用的工具，就是人工转换，特别是对于老板要求的文档，转换质量要找比较好的，万一不小心做不好，那分分钟加薪就泡汤了！

如下，直接点击“去转换”，到下单页面也很方便，直接上传文件，就能看到对应的报价和返稿时间，确认没问题直接提交订单即可。联系方式记得填，处理好了还能收到短信或者邮箱提醒，也是很方便的啦。

体验链接：pdf365.cn/smart

收起

展开全文
Adobe Reader 文档无法签名_如何在Mac上使用预览对PDF进行电子签名
2020-10-21 22:11:36
当您通过电子邮件收到必须签名的PDF文档时，打印文件，用钢笔在虚线上签名，扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务。幸运的是，苹果公司增加了使用预览功能对PDF文档进行电子签名的功能，该程序...
当您通过电子邮件收到必须签名的PDF文档时，打印文件，用钢笔在虚线上签名，扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务。幸运的是，苹果公司增加了使用预览功能对PDF文档进行电子签名的功能，该程序预先安装在每台运行OS X Lion或更高版本的Mac上。

在Mac上使用“预览”在PDF上进行电子签名的步骤非常简单，可以节省宝贵的时间，尤其是当您要签署多个文档，合同，表格或其他文书时。如果您担心自己的虚拟签名看起来很糟糕，请放心，可以使用触控板或在Mac内置的iSight相机上的纸上签名来创建签名。

使用触控板对PDF进行电子签名的步骤

1.打开您需要在预览中登录的PDF文件。 2.点击标记图标(

)，然后签名(

)图标。 3.单击创建签名>单击此处开始。在触控板上绘制您的签名。完成后单击任意键。单击完成。 4.单击创建的签名，将其插入PDF文档。签名可以像常规图像一样移动或调整大小。

使用相机进行电子签名PDF的步骤

1.打开您需要在预览中登录的PDF文件。 2.点击标记图标(

)，然后签名(

)图标。 3.单击创建签名>相机。在白纸上签署您的名字，并保持它对相机可见。预览将绘制一个虚拟签名。单击完成。 4.单击创建的签名，将其插入PDF文档。签名可以像常规图像一样移动或调整大小。

提示

如果使用触控板创建电子签名，建议您先查看“预览”，然后用手指缓慢平稳地移动以获得最佳效果。为了获得更精确的签名，您可以使用iPhone或iPad手写笔(最好是带有细头的手写笔)在触控板上绘制签名。
签署一张白纸并将其拿在相机上是在Preview中创建电子签名的最简单方法，尽管这种方法并不总是能产生最佳效果。当您将签名按住Mac的相机时，签名将显示为倒置，但是预览会自动确保从左到右正确读取。
即使没有打开PDF文档，也可以按照上述步骤在“预览”中创建电子签名。默认情况下，您创建的所有电子签名都会自动存储在“预览”列表中，这样您就可以将它们插入以后的PDF文档和其他文件中，而无需重复这些步骤。预览可以一次存储多个签名。
苹果还在macOS的Mail应用程序中提供了标记工具，以创建可以直接插入您的电子邮件中的电子签名。

以上就是MacW小编为大家带来的“如何在Mac上使用预览对PDF进行电子签名”，希望小伙伴们会喜欢！
收起
展开全文
使用vue实现一个电子签名组件的示例代码
2020-10-15 19:39:13

主要介绍了使用vue实现一个电子签名组件的示例代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

收起
非常好用的电子签名制作软件
2020-12-10 14:43:06

可以将图片转化成矢量图导入CAD的软件，可以很方便根据自己的签名图片制作出属于自己的电子签名，葱子告别手动描边。

收起

autocad
知网电子签名配置方法.zip
2020-05-15 14:21:44

该文档是由于个人需要制作电子签名，查询整理的资料，主要是电子签名的具体操作，包含视频和文档，两分钟即可完成，需要的自取，请勿商用，仅限学习交流使用。

收起
assinatura-digital:在PDF文档上执行数字签名的项目
2021-05-24 06:35:18

一个简单的项目，可以在PDF文档上执行数字签名。由Felipe Sales在Laravel框架中开发。了解和框架。可用版本开始项目有关项目执行的建议：在所需的文件夹中，在命令终端git clone git@github....

收起

PHP
电子签名功能原理
2019-01-16 15:57:10

电子签名功能原理整理；自己整理出的笔记，方便日后查看

收起
APP分发系统源码全开源超级签名系统源码附带详细部署文档
2021-11-05 11:42:28

APP分发系统源码全开源超级签名系统源码附带详细部署文档

收起
电子功用-处理带有电子签名的文档的方法和系统
2021-09-15 14:54:33

行业资料-电子功用-处理带有电子签名的文档的方法和系统

收起
C#电子签名功能
2019-02-19 23:38:52

一款基于C#开发的电子签名程序，主要实现了签名的保存，适合初学者使用，可将完成的签名保存到指定位置，可修改对应的画笔颜色、宽度、透明度

收起

C#
实现在线电子签名与OFFICE文档电子签名
2009-07-28 11:14:39

实现在线电子签名与OFFICE文档电子签名。

收起
WORD/EXCEL PDF 电子签章、个人签名转PDF
2018-11-08 11:48:21

软件可以实现给 word excel pdf 等可以打印的文档转成图片或 PDF 文件，并且可以添加盖章和个人签名支持win7 64 位

收起
java实现pdf文件电子签名
热门讨论 2016-05-06 10:47:21

本示例通过java自动生成pfx证书，根据生成的证书，自动实现对pdf文件的电子签名

收起
pdfjs预览显示电子签名
2018-07-26 10:10:23

PDFJS预览pdf时无法显示电子签名，亲测本方案完美解决

收起
H5手机签字 canvas_sign 手机电子签字 电子签名
2022-06-02 10:43:06

H5页面通过canvas_sign实现手机签名功能 canvas 电脑及手机端签名实现 电子签名

收起
如何在 Mac 中对文档进行签名？
2021-09-07 17:38:57

可以通过多种方式在 Mac 上创建签名和签署文档，来看看吧。标记工具再次派上用场。但是，您无法触摸 Mac 的屏幕，那么您将如何在虚线上签署您的姓名或首字母缩写？苹果在“预览”应用程序中加入了三种智能方式...

如何从 Mac 对文档进行签名？虽然不是一个重要的问题，但它偶尔会出现在数字协议、紧急收据、自我证明等方面。可以通过多种方式在 Mac 上创建签名和签署文档，来看看吧。

标记工具再次派上用场。但是，您无法触摸 Mac 的屏幕，那么您将如何在虚线上签署您的姓名或首字母缩写？

苹果在“预览”应用程序中加入了三种智能方式来帮助您做到这一点。让我们检查一下。

在 Mac 预览中为 PDF 添加签名

1.使用“预览”打开文档。

2.转到您需要签名的页面。

3.单击右上角的标记图标。

4.接下来，点击签名图标。

5.从列表中选择签名或单击创建签名。

您将在这里有三个选择；让我们详细了解每一个。

一、使用触控板创建签名

1.确保选择了“触控板”选项卡，然后选择“单击此处开始”。

2.现在，将手指滑过触控板以创建签名，然后按任意键停止。

3.单击清除以重新开始或单击完成以保存签名。

二、使用 Mac 的相机创建签名

1.移至“相机”选项卡。

2.在白纸上签名并将其展示给相机。

3.Mac 将读取并显示签名的镜像，单击完成以保存它。

三、在 Mac 上使用 iPhone 创建签名

1.打开iPhone 标签。

2.配对的 iPhone 将立即拥有类似的屏幕。旋转到横向以更好地访问。

3.用手指或手写笔签名；它会立即反映在 Mac 的屏幕上。

4.在 iPhone 或 Mac 上轻点“完成”以保存签名。

创建签名并将其插入文件后，调整大小并将其移动到所需位置→按command + S保存更改。

在 Mac 上的邮件中签署文档

您可以直接签署邮件中附加的 PDF 和照片。好消息是您不受本地邮件应用程序的限制。几乎所有第三方邮件应用程序都支持该功能。

1.打开带有您要签名的附件的邮件。

2.双击附件；它将在“预览”中打开。

3.现在，单击标记图标→签名→添加签名。

4.将副本保存在 Mac 上并重新附加以共享它。

如何在 Mac 上创建透明签名?

为什么我需要一份没有背景的签名副本？因为您无法使用标记对 Word 文档或其他格式的文件进行签名。

此外，您可能想要签署您的数字艺术作品、为邮件添加个性化签名或其他内容。这个技巧可以帮助你做到这一切，甚至更多。

1.随机截取屏幕截图。

2.在预览中打开屏幕截图，然后单击标记工具。

3.单击即时 Alpha 工具（类似魔杖的图标）。

4.在照片上拖动光标，直到它变成完全粉红色。

5.现在，在不释放光标的情况下按键盘上的Delete两次。

6.将您的签名插入空框中并尽可能展开。

7.最后，从菜单栏中转到“文件”并单击“导出”。

将图像另存为 PNG、TIFF 或 JPEG 2000（支持 Alpha 通道的格式）并确保启用该设置以保留背景的透明度。完成后，您可以随意使用此图像。

如何从 Mac 删除保存的签名？

出于安全原因不想保留签名，或者只是因为签名太有趣而现在需要清理？不管是什么原因，这里是你可以做到的。

1.使用预览打开文档或照片，然后单击标记图标。

2.单击签名图标，只需将光标移至签名即可。

3.选择X 图标将其删除。

收起

展开全文

mac
中国电子签名行业研究报告
2022-05-22 11:40:13

中国电子签名行业研究报告

收起
电子签名法
2018-05-09 10:22:47

该文档是政府颁发的正式电子签名文档，具有法律意义。

收起
电子签名有效性未知的解决办法
2018-03-24 16:19:11

现在电子签名已经非常普及，也得到了法律的认可，电子签名的有效性可以直接通过国际通用pdf阅读器打开和验证签名的有效性，但是在第一次打开的时候会显示签名有效性未知的问题，只需要将CA的根证书导入即可。...

收起
行业资料-电子功用-具有电子签名的标准多媒体电子病历文档编辑管理系统的说明分析.rar
2021-09-22 21:30:16

行业资料-电子功用-具有电子签名的标准多媒体电子病历文档编辑管理系统的说明分析.rar

收起
PDF文档加密签名处理
2021-06-08 09:47:10

PDF文档加密签名处理如果一个PDF被加密了，用password remover就能解决。可如果加了数字签名怎么办？建一个空白页，然后插入有签名的文档，再删除空白页，保存即可。 1.以“管理员身份运行”Office Password ...

收起
WPS、WORD文档插入手写电子签名
千次阅读 2020-05-22 11:36:47

1、手机拍下电子签名 2、插入 ----> 图片： 3、选中图片，设置对象格式：

收起
Word文档电子版“手写签名”！替代手写直接打印
千次阅读 2021-04-18 11:25:44

平时在使用U盘的时候，有时候会发现U盘插入USB接口之后，电脑什么显示都就没有，那么电脑上插入U盘之后不显示怎么办呢在确保U盘以及电脑的USB接口没有问题的情况下；在桌面上面找到计算机图标。然后在打开的页面...

收起
PDFSignjs是一个用于在浏览器中签名PDF文档的JavaScript库
2019-08-12 04:36:08

PDFSign.js 是一个用于在浏览器中签名 PDF 文档的 JavaScript 库。签名只在浏览器中进行，且不会通过网络发送私钥或密码。

收起
电子签名技术在电子商务中的应用研究.doc
2021-10-04 15:37:29

电子签名技术在电子商务中的应用研究.doc

收起
Adobe PDF数字签名技术官方文档--中文翻译
2018-06-23 11:57:39

本文档描述了数字签名在PDF文档结构中的设计以及PDF语言对签名相关特性的支持。Adobe® Reader®和Acrobat®已经实现了PDF的所有特性，基于公钥基础设施(PKI)的技术，它提供了全面的数字签名身份验证功能，第三方...

收起
如何在文档中添加签名证书电子章
2019-08-09 16:40:08

首先需要下载Adobe_Acrobat_Pro9 安装就不赘述，双击下一步即可打开一个pdf文件，新建一个签名：点击签名-使用可见签名验证，这里因为我已经创建好签名了，没法...因为我们只希望文档上只显示印章。 ...

收起
电子签名技术在电子商务中的应用研究教学内容.doc
2020-06-14 01:09:04

电子签名技术在电子商务中的应用研究精品文档精品文档收集于网络如有侵权请联系管理员删除收集于网络如有侵权请联系管理员删除精品文档收集于网络如有侵权请联系管理员删除 电子签名技术在电子商务中的应用...

收起