pc端签名 vue 生成图片_Vue Canvas 实现电子签名 手写板
最近再做移动端电子签名,Vue+Canvas实现,移动端、PC端均可,也可以从github下载。
我在做这个功能的时候参考了 这个代码,但是在移动端光标与实际划线有偏移,我在我的代码中修正了这个问题。
代码
```
JS
export default {
data() {
return {
stageInfo:'',
imgUrl:'',
client: {},
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
w: null,
h: null,
isDown: false,
isViewAutograph: this.$route.query.isViews > 0,
contractSuccess: this.$route.query.contractSuccess
}
},
mounted() {
let canvas = this.$refs.canvasF
canvas.height = this.$refs.canvasHW.offsetHeight - 500
canvas.width = this.$refs.canvasHW.offsetWidth - 50
this.canvasTxt = canvas.getContext('2d')
this.stageInfo = canvas.getBoundingClientRect()
},
methods: {
//mobile
touchStart(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clienX,
y: ev.targetTouches[0].clientY,
}
this.startX = obj.x
this.startY = obj.y
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)
}
},
touchMove(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top
}
this.moveY = obj.y
this.moveX = obj.x
this.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.y
this.startX = obj.x
this.points.push(obj)
}
},
touchEnd(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top
}
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)
}
},
//pc
mouseDown(ev) {
ev = ev || event
ev.preventDefault()
if (1) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.startX = obj.x
this.startY = obj.y
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.isDown = true
}
},
mouseMove(ev) {
ev = ev || event
ev.preventDefault()
if (this.isDown) {
let obj = {
x: ev.offsetX,
y: ev.offsetY
}
this.moveY = obj.y
this.moveX = obj.x
this.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.y
this.startX = obj.x
this.points.push(obj)
}
},
mouseUp(ev) {
ev = ev || event
ev.preventDefault()
if (1) {
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
}
},
//重写
overwrite() {
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = []
},
//提交签名
commit() {
this.imgUrl=this.$refs.canvasF.toDataURL();
console.log(this.$refs.canvasF.toDataURL()) //签名img回传后台
}
}
}
CSS
.signatureBox {
width: 100%;
height: calc(100% - 50px);
box-sizing: border-box;
overflow: hidden;
background: #fff;
z-index: 100;
display: flex;
flex-direction: column;
}
.canvasBox {
box-sizing: border-box;
flex: 1;
}
canvas {
border: 1px solid #7d7d7d;
}
.btnBox {
padding: 10px;
text-align: center;
}
.btnBox button:first-of-type {
background: transparent;
border-radius: 4px;
height: 40px;
width: 80px;
font-size: 14px;
}
.btnBox button:last-of-type {
background: #71b900;
color: #fff;
border-radius: 4px;
height: 40px;
width: 80px;
font-size: 14px;
}
pc端签名 vue 生成图片_Vue Canvas 实现电子签名 手写板相关推荐
- pc端签名 vue 生成图片_vue 使用 canvas 实现手写电子签名
功能 兼容 PC 和 Mobile: 画布自适应屏幕大小变化(窗口缩放.屏幕旋转时画布无需重置,自动校正坐标偏移): 自定义画布尺寸(导出图尺寸),画笔粗细.颜色,画布背景色: 支持裁剪 (针对需求: ...
- pc端签名 vue 生成图片_vue 实现手写电子签名
1.兼容 PC 和 Mobile: 2.画布自适应屏幕大小变化(窗口缩放.屏幕旋转时画布无需重置,自动校正坐标偏移): 3.自定义画布尺寸(导出图尺寸),画笔粗细.颜色,画布背景色: 4.支持裁剪 ( ...
- pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件 在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板 想要绘制图形,第一步想到的就是使用canvas标签 ...
- 微信扫码登陆PC端(Vue)(小程序)
本文章基于Vue项目并且已经开发一个完整上线的微信小程序,制作PC端时实现微信小程序扫码登陆PC端. 一.向后端请求token 1.后端会定时生成并更新的一个token 2.正常的接口请求从后端拿到这 ...
- 仿网易云PC端项目-vue
项目GitHub地址: wangyiMusicPlayer. wangyiMusicPlayer--这是一个仿网易云PC端的的项目(vue) 项目简介: 本项目使用的后端接口{接口文档已放在项目中,自 ...
- 使用felxable.js适配pc端的Vue项目
今天做公司官网 需要针对不同pc屏幕做适配 想了半天觉得使用rem布局最美观 而且最好是使用flexable.js的最方便 不过这个 方案没有官方pc端的插件 需要使用原有移动端flexable.js ...
- php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
- 使用微信小程序扫码登录系统PC端web的功能
1.项目说明: 项目PC端(vue单页面应用,前后端分离).移动端(微信小程序)共用同一Java Springboot服务.小程序可以直接获取微信手机号登录,不需要密码,因为系统黙认密码是随机的,因此 ...
- vue实现上下滑动翻页_vue 实现滚动到底部翻页效果(pc端)
pc端vue 滚动到底部翻页 效果,具体内容如下所示: html: [{{item.code||item.name}}] {{item.name}} js: 先写滚动事件 handleScroll() ...
- vue 侧边悬浮_Vue实现PC端靠边悬浮球的代码
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录 嗯,具体代码: :class="['meun-sw ...
最新文章
- 圆环,扇形控件基本算法一种实现 - 代码库 - CocoaChina_让移动开发更简单
- Linux awk+uniq+sort 统计文件中某字符串出现次数并排序
- 【Linux系统编程】进程间通信之命名管道
- Log4j的自定义logger
- magento常用的语句
- 我们就来看看网络算命究竟有哪些套路
- clock()函数的使用
- 只读更新全程图解教程(转)
- 群晖NAS安装cpolar内网穿透套件(群晖6.X版)
- 事件营销成功案例-引爆全网的优衣库事件
- 服务器自动启动的原因,服务器经常自动重启是什么原因
- 小学计算机考核,小学信息技术学科考核评价方案.docx
- Excel的高级筛选——数据匹配
- 漫天要价,就地还钱!
- 技术分享1: jinkens构建Android工程,并上传到蒲公英平台
- 人工智能时代是什么时代?
- 一套近乎完美的公司财务流程
- DC电源口实物VCC引脚和GND引脚
- gpedit.msc打不开的解决办法
- QT设置背景图片的Qss实现方式
热门文章
- 安装 | Android studio 3.5.2安装教程
- ListView与Adapter笔记:ZrcListView
- Centos 设置时区和时间以及增加中文输入法
- NSURLConnection实现断点续传
- web安全day47:口令、字典、crunch、cupp、hydra、MSF-psexec_psh的使用
- 服务器(Windows系统)自建蚂蚁(leanote)笔记超详细步骤(包含数据备份和数据还原)
- 计算机网络网络层之数据报网络
- 游戏开发之静态成员实现单列设计模式(C++基础)
- 游戏筑基开发之回调函数(C语言)
- NetDevOps常用数据库python实战-MongoDB