-
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的软件,可以很方便根据自己的签名图片制作出属于自己的电子签名,葱子告别手动描边。 -
知网电子签名配置方法.zip
2020-05-15 14:21:44该文档是由于个人需要制作电子签名,查询整理的资料,主要是电子签名的具体操作,包含视频和文档,两分钟即可完成,需要的自取,请勿商用,仅限学习交流使用。 -
assinatura-digital:在PDF文档上执行数字签名的项目
2021-05-24 06:35:18一个简单的项目,可以在PDF文档上执行数字签名。 由Felipe Sales在Laravel框架中开发。 了解和框架。 可用版本 开始项目 有关项目执行的建议: 在所需的文件夹中,在命令终端git clone git@github.... -
电子签名功能原理
2019-01-16 15:57:10电子签名功能原理整理; 自己整理出的笔记,方便日后查看 -
APP分发系统源码 全开源超级签名系统源码 附带详细部署文档
2021-11-05 11:42:28APP分发系统源码 全开源超级签名系统源码 附带详细部署文档 -
电子功用-处理带有电子签名的文档的方法和系统
2021-09-15 14:54:33行业资料-电子功用-处理带有电子签名的文档的方法和系统 -
C#电子签名功能
2019-02-19 23:38:52一款基于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:23PDFJS预览pdf时无法显示电子签名,亲测本方案完美解决 -
H5手机签字 canvas_sign 手机电子签字 电子签名
2022-06-02 10:43:06H5页面通过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 图标将其删除。
-
中国电子签名行业研究报告
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:10PDF文档加密签名处理 如果一个PDF被加密了,用password remover就能解决。可如果加了数字签名怎么办? 建一个空白页,然后插入有签名的文档,再删除空白页,保存即可。 1.以“管理员身份运行”Office Password ... -
WPS、WORD文档插入手写电子签名
2020-05-22 11:36:471、手机拍下电子签名 2、插入 ----> 图片: 3、选中图片,设置对象格式: -
Word文档电子版“手写签名”!替代手写直接打印
2021-04-18 11:25:44平时在使用U盘的时候,有时候会发现U盘插入USB接口之后,电脑什么显示都就没有,那么电脑上插入U盘之后不显示怎么办呢 在确保U盘以及电脑的USB接口没有问题的情况下;在桌面上面找到计算机图标。 然后在打开的页面... -
PDFSignjs是一个用于在浏览器中签名PDF文档的JavaScript库
2019-08-12 04:36:08PDFSign.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电子签名技术在电子商务中的应用研究 精品文档 精品文档 收集于网络如有侵权请联系管理员删除 收集于网络如有侵权请联系管理员删除 精品文档 收集于网络如有侵权请联系管理员删除 电子签名技术在电子商务中的应用...