精华内容
下载资源
问答
  • 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
    在这里插入图片描述

    展开全文
  • 当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔虚线上签名,扫描签名文档并将其发回的过程可能是一项相当繁琐的任务。幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该程序...

    当您通过电子邮件收到必须签名的PDF文档时,打印文件,用钢笔在虚线上签名,扫描签名的文档并将其发回的过程可能是一项相当繁琐的任务。幸运的是,苹果公司增加了使用预览功能对PDF文档进行电子签名的功能,该程序预先安装在每台运行OS X Lion或更高版本的Mac上。

    a71badeb9479cf8a20a152837023bc6b.png

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

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

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

    0d46e9857e98d062af81f34897ab7625.png

    ),然后签名(

    48efc5f03c9567446ca6c09b6e40cde1.png

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

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

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

    55382caf8d4b7c2e3f60552ac6afed96.png

    ),然后签名(

    457161e48a2861b63abe544243bb67b2.png

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

    提示

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

    以上就是MacW小编为大家带来的“如何在Mac上使用预览对PDF进行电子签名”,希望小伙伴们会喜欢!

    展开全文
  • 主要介绍了使用vue实现一个电子签名组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 可以将图片转化成矢量图导入CAD的软件,可以很方便根据自己的签名图片制作出属于自己的电子签名,葱子告别手动描边。
  • 文档是由于个人需要制作电子签名,查询整理的资料,主要是电子签名的具体操作,包含视频和文档,两分钟即可完成,需要的自取,请勿商用,仅限学习交流使用。
  • 一个简单的项目,可以PDF文档上执行数字签名。 由Felipe SalesLaravel框架中开发。 了解和框架。 可用版本 开始项目 有关项目执行的建议: 所需的文件夹中,命令终端git clone git@github....
  • 电子签名功能原理

    2019-01-16 15:57:10
    电子签名功能原理整理; 自己整理出的笔记,方便日后查看
  • APP分发系统源码 全开源超级签名系统源码 附带详细部署文档
  • 行业资料-电子功用-处理带有电子签名文档的方法和系统
  • C#电子签名功能

    2019-02-19 23:38:52
    一款基于C#开发的电子签名程序,主要实现了签名的保存,适合初学者使用,可将完成的签名保存到指定位置,可修改对应的画笔颜色、宽度、透明度
  • 实现在线电子签名与OFFICE文档电子签名
  • 软件可以实现给 word excel pdf 等可以打印的文档 转成图片 或 PDF 文件,并且可以添加盖章和个人签名 支持win7 64 位
  • java实现pdf文件电子签名

    热门讨论 2016-05-06 10:47:21
    本示例通过java自动生成pfx证书,根据生成的证书,自动实现对pdf文件的电子签名
  • PDFJS预览pdf时无法显示电子签名,亲测本方案完美解决
  • H5页面通过canvas_sign实现手机签名功能 canvas 电脑及手机端签名实现 电子签名
  • 可以通过多种方式 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 图标将其删除。

    展开全文
  • 中国电子签名行业研究报告
  • 电子签名

    2018-05-09 10:22:47
    文档是政府颁发的正式电子签名文档,具有法律意义。
  • 现在电子签名已经非常普及,也得到了法律的认可,电子签名的有效性可以直接通过国际通用pdf阅读器打开和验证签名的有效性,但是第一次打开的时候会显示签名有效性未知的问题,只需要将CA的根证书导入即可。...
  • 行业资料-电子功用-具有电子签名的标准多媒体电子病历文档编辑管理系统的说明分析.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、选中图片,设置对象格式:
  • 平时使用U盘的时候,有时候会发现U盘插入USB接口之后,电脑什么显示都就没有,那么电脑插入U盘之后不显示怎么办呢 确保U盘以及电脑的USB接口没有问题的情况下;桌面上面找到计算机图标。 然后打开的页面...
  • PDFSign.js 是一个用于浏览器中签名 PDF 文档的 JavaScript 库。签名浏览器中进行,且不会通过网络发送私钥或密码。
  • 电子签名技术在电子商务中的应用研究.doc
  • 文档描述了数字签名在PDF文档结构中的设计以及PDF语言对签名相关特性的支持。Adobe® Reader®和Acrobat®已经实现了PDF的所有特性,基于公钥基础设施(PKI)的技术,它提供了全面的数字签名身份验证功能,第三方...
  • 首先需要下载Adobe_Acrobat_Pro9 安装就不赘述,双击下一步即可 打开一个pdf文件,新建一个签名:点击签名-使用可见签名验证,这里因为我已经创建好签名了,没法...因为我们只希望文档上只显示印章。 ...
  • 电子签名技术在电子商务中的应用研究 精品文档 精品文档 收集于网络如有侵权请联系管理员删除 收集于网络如有侵权请联系管理员删除 精品文档 收集于网络如有侵权请联系管理员删除 电子签名技术在电子商务中的应用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,786
精华内容 9,914
关键字:

如何在电子文档上签名