Vue-电子签名(E-Signature)

业务场景

用户在页面使用电子签名进行文件的签收与信息的确认

分析

考虑用户会通过手机或者PC端进行操作，因此需要在事件中考虑手机端部分

思路

通过一个对话框的形式利用Canvas生成图片并通过toDataURL()转换成Base64的形式保存下来提交给后端进行保存

最终效果

实际效果展示

实现

export default {name: 'ESignature',data() {return {points: [],canvasTxt: null,stage_info: [],startX: 0,startY: 0,moveY: 0,moveX: 0,isDown: false,strokeStyle: '#000',lineWidth: 2}},mounted() {this.initCanvas()},methods: {// 初始化CanvasinitCanvas() {let canvas = this.$refs.canvasF// 获取画布的高度canvas.height = this.$refs.canvasHW.offsetHeight - 20// 获取画布的宽度canvas.width = this.$refs.canvasHW.offsetWidth - 20// 创建 context 对象this.canvasTxt = canvas.getContext('2d')this.stage_info = canvas.getBoundingClientRect()},// 鼠标按下事件 - 准备绘画mouseDown(ev) {ev = ev || eventev.preventDefault()if (ev) {let obj = {x: ev.offsetX,y: ev.offsetY}this.startX = obj.xthis.startY = obj.ythis.canvasTxt.beginPath()this.canvasTxt.moveTo(this.startX, this.startY)this.canvasTxt.lineTo(obj.x, obj.y)this.canvasTxt.stroke()this.canvasTxt.closePath()this.points.push(obj)this.isDown = true}},// 鼠标移动事件 - 开始绘画mouseMove(ev) {ev = ev || eventev.preventDefault()if (this.isDown) {let obj = {x: ev.offsetX,y: ev.offsetY}this.moveY = obj.ythis.moveX = obj.xthis.canvasTxt.strokeStyle = this.strokeStylethis.canvasTxt.lineWidth = this.lineWidththis.canvasTxt.beginPath()this.canvasTxt.moveTo(this.startX, this.startY)this.canvasTxt.lineTo(obj.x, obj.y)this.canvasTxt.stroke()this.canvasTxt.closePath()this.startY = obj.ythis.startX = obj.xthis.points.push(obj)}},// 松开鼠标事件 - 停止绘画mouseUp(ev) {ev = ev || eventev.preventDefault()if (ev) {let obj = {x: ev.offsetX,y: ev.offsetY}this.canvasTxt.beginPath()this.canvasTxt.moveTo(this.startX, this.startY)this.canvasTxt.lineTo(obj.x, obj.y)this.canvasTxt.stroke()this.canvasTxt.closePath()this.points.push(obj)this.points.push({ x: -1, y: -1 })this.isDown = false}},// 返回handleGoBack() {this.handleOverwrite()this.$emit('on-back')},// 重写handleOverwrite() {this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)this.points = []},}
}

详情请看：Vue-电子签名(E-Signature)

Vue-电子签名(E-Signature)相关推荐

电子签名和电子证书
上回我白话了一下:"对称加密"和"非对称加密"的来龙去脉,收到了不错的反馈,今天接着上一次白话留下的伏笔,说一说"对称加密"和"非 ...
sa密码修改记录_【数据完整性】一文读懂电子记录与电子签名
一.电子记录的定义和特征 1.电子记录(Electronic Record)是指依靠计算机系统进行创建.修改.维护.存档.找回或发送,诸如文字.图表.数据.声音.图像及其他以电子(数字)形式存在的信 ...
白话解释非对称加密，电子签名，电子证书，根证书，HTTPS，PKI 到底是什么
上回我白话了一下:"对称加密"和"非对称加密"的来龙去脉,收到了不错的反馈,今天接着上一次白话留下的伏笔,说一说"对称加密"和"非 ...
【北邮国院大三上】电子商务法(e-commerce law)知识点整理——e-transaction_Part2_BUPTWeek8
北邮国院大三电商在读,随课程进行整理知识点.仅整理PPT和相关法条中相对重要的知识点,个人认为相对不重要的细小的知识点不列在其中.如有错误请指出.转载请注明出处,祝您学习愉快. 在进入主题之前,先讲了 ...
vue signature 电子签名
只修改3视图文件文件夹位置放的相同就不用改相对地址 npm install vue-signature-simple 文件名index.js 与main.js同级 import VueSignat ...
vue中使用电子签名
使用vue-cli4脚手架,js-signature 2.0.0(https://www.npmjs.com/package/jq-signature)jquery 3.4.1. 1.安装jq及js- ...
【电子签名手机-vue】
电子签名手机-vue <template><div class="signature" @touchmove.prevent><div class=& ...
VUE解决微信签名,SPA微信invalid signature问题,完美处理
深度解决方案,包教不包会,只因为踩坑无数,希望大家能有所收获前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大 ...
Web前后端笔记-vue封装http请求添加signature及后端(Java)解析并验证
首先帖下运行截图: 签名过期情况: 签名错误情况: 这里npm要导入js-md5,并且在main.js中添加 import md5 from 'js-md5' Vue.prototype.$md5 = ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...

Vue-电子签名(E-Signature)

业务场景

分析

思路

最终效果

实现

详情请看：Vue-电子签名(E-Signature)

Vue-电子签名(E-Signature)相关推荐

最新文章

热门文章