html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式。
刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和传值控制,下面代码我单独整理出来,可自行封装组件(只支持移动端,不支持pc端)。
代码中,css自行修改一下宽高,背景之类即可。
代码如下
清除签名
确认签名
export default {
name: "signature",
data() {
return {
image: "",
mousePressed: false,
c: "",
ctx: "",
lastX: 0,
lastY: 0,
};
},
mounted() {
this.image = "";
this.mousePressed = false;
var lastX, lastY;
this.ctx = document.getElementById("myCanvas").getContext("2d");
this.c = document.getElementById("myCanvas");
var signWrap = document.getElementById("signWrap");
this.c.width = signWrap.clientWidth; // 设置宽度
this.c.height = signWrap.clientHeight; // 设置高度
// 监听touchstart事件,touchmove事件,touchend事件等事件
this.InitThis();
},
methods: {
InitThis() {
// 触摸屏
var that = this;
this.c.addEventListener(
"touchstart",
function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
this.mousePressed = true;
that.Draw(
touch.pageX - this.offsetLeft,
touch.pageY - this.offsetTop,
false
);
}
},
false
);
this.c.addEventListener(
"touchmove",
function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
if (this.mousePressed) {
that.Draw(
touch.pageX - this.offsetLeft,
touch.pageY - this.offsetTop,
true
);
}
}
},
false
);
this.c.addEventListener(
"touchend",
function (event) {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
this.mousePressed = false;
}
},
false
);
// 鼠标
this.c.onmousedown = function (event) {
this.mousePressed = true;
that.Draw(
event.pageX - this.offsetLeft,
event.pageY - this.offsetTop,
false
);
};
this.c.onmousemove = function (event) {
if (this.mousePressed) {
that.Draw(
event.pageX - this.offsetLeft,
event.pageY - this.offsetTop,
true
);
}
};
this.c.onmouseup = function (event) {
this.mousePressed = false;
};
},
Draw(x, y, isDown) {
if (isDown) {
this.ctx.beginPath();
this.ctx.strokeStyle = "#000"; // 颜色
this.ctx.lineWidth = 3; // 线宽
this.ctx.lineJoin = "round";
this.ctx.lineMax = 10; // 设置画笔最大线宽
this.ctx.lineMin = 3; // 设置画笔最小线宽
this.ctx.linePressure = 1.2; // 设置画笔笔触压力
this.ctx.smoothness = 30; // 设置画笔笔触大小变化的平滑度
this.ctx.moveTo(this.lastX, this.lastY);
this.ctx.lineTo(x, y);
this.ctx.closePath();
this.ctx.stroke();
}
this.lastX = x;
this.lastY = y;
},
// 清空画板
clearArea() {
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
},
// 提交签名
saveSign() {
this.checkEmpty(); // 调用 表单非空验证
},
checkEmpty() {
var c = document.getElementById("myCanvas"); // 获取html的canvas对象,我这个id="myCanvas"
if (this.isCanvasBlank(c)) {
alert("请在签名区域签名后再次确认");
return;
} else {
var image = this.c.toDataURL("image/png"); // 得到生成后的签名base64位 url 地址
console.log(image); // 打印图片base64 url
}
},
// 验证canvas画布是否为空函数
isCanvasBlank(canvas) {
var blank = document.createElement("canvas"); // 系统获取一个空canvas对象
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() == blank.toDataURL(); // 比较值相等则为空
},
},
};
.page {
width: 100%;
.content {
width: 100%;
height: 1.7rem;
background: url(../assets/img/photo_qmq.png) no-repeat;
background-size: 100% 100%;
background-position: center center;
.sign-wrap {
width: 100%;
height: 100%;
}
}
.con-btn {
width: 100%;
display: flex;
align-content: center;
justify-content: space-between;
opacity: 0.75;
span {
font-size: 0.14rem;
width: 100%;
height: 0.48rem;
display: flex;
align-items: center;
justify-content: center;
}
.staging-btn {
color: #4154ff;
background: #fff;
}
.submit-btn {
color: #fff;
background: #4154ff;
}
}
}
html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名相关推荐
- 雪狐html5,【干货】如何实现H5移动端无缝滚动动画
原标题:[干货]如何实现H5移动端无缝滚动动画 需求分析 哈哈,上动态图真的是一下就明了了. 就是滚动么滚动,那么制作这个有什么方法呢?我们来总结一下: html骨架 其实很简单,最外面的 是做固定的 ...
- tv端h5_最新版H5双端影视APP源码
最新版H5 双端影视app 源码 V3 全新后台 下载页美化 后台登录 bug 修复 准备工作 1.将源码解压到新的文件夹: 2.使用 notepad++批量替换 URL[http://demo.co ...
- H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式 刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
- 【H5移动端】关于前端H5移动端的单位适配(不定期补充)
文章目录 前置概念 视口概念 关于像素 设置理想视口 方案一:@media修改动态rem 方案二:第三方手淘flexible postcss-pxtorem 方案三:JS控制rem 方案四:使用vh/ ...
- 【移动端适配二】H5移动端适配屏幕安全区(ios和android)
全面屏手机把整个webview(包括状态栏)给H5的话,不对状态栏进行控制往往会有以下如图问题出现,这样头部的返回按钮置于页面的安全区外,无法进行操作. 有问题的: 想要的效果: 具体的实现: 针对i ...
- js 实现 H5 div的内容 放大缩小拖拽功能 vue可用
大佬写的组件 , 虽然我看不懂 但不妨碍我会用啊 想去看大佬代码的点这里 下面的无脑的代码时刻 一.复制代码到一个单独的.vue文件然后 走人去下一步 // 放大缩小页面组件 <template ...
- datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-首页界面实操06...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个首页界面的H5. 这是要实现的H5首页界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目smart ...
- datagridview 绑定list 不能刷新界面_人人都可写代码-H5零基础编程-发布活动界面实操07...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个发布活动界面的H5. 这是要实现的H5发布活动界面展示效果,下面就是教大家如何制作的步骤: 1.在views的项目s ...
- h5可以获取本机手机号码么_人人都可写代码-H5零基础编程-登录界面实操05
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个登录界面的H5. 这是要实现的H5登录界面展示效果,手机号+验证码的登录方式:下面就是教大家如何制作的步骤: 1.在 ...
最新文章
- C++STL源代码学习(之slist篇)
- 战神背光键盘如何关系_?复工了?换个键盘先!0-2000元键盘推荐
- 【C语言】控制台窗口图形界面编程(四):文本输出
- hive in 字符串_hive常用函数 concat concat_ws row_number
- 没了 IDE,你的 Java 项目还能跑起来吗?
- Python 之父从 Dropbox 退
- 服务器系统怎么找便签,win7系统便签在哪里?win7系统便签功能使用教程
- cs6给画笔分组_画笔工具,PS cs6笔刷入门介绍
- 实战教你刷显卡BIOS
- UE4:转换成VR项目
- ERP发货系统的修改(四十三)
- 环境和社会风险分类c类_企业经营风险的定义、种类以及基本分类
- 一文读懂APS系统的核心算法和数学理论
- DSP从flash启动
- 学习记录:二层网络环路相关
- 上海育才高中2021高考成绩查询,育才中学2018高考成绩
- 设计模式--04模板方法模式
- 拥有谷歌100万股原始股,奥尼尔每年能够得到多少分红?
- Wine Reviews(葡萄酒评论相关数据集)
- 《Cortex-CM3权威指南》——存储器系统
热门文章
- Enriched Feature Guided Refinement Network for Object Detection(面向目标检测的丰富特征引导细化网络)
- 可复制的领导力(来自樊登读书会)
- python从入门到入土表情包-我用Python一键保存了半佛老师所有的骚气表情包
- 企业邮箱帐号无法发信
- COJ 0580 4021征兵方案
- AdamW优化器简单理解
- htmltabl生成html表格并发送企业微信
- python实现大规模邻域搜索(LNS)求解旅行商问题(TSP)
- csdn赵四老师语录
- mysql数据库所有表合并_mysql数据库如何将表合并我从数据库中倒出表导出后是这样的b 爱问知识人...