H5移动端项目实现手写签名功能 vue实现手写签名

vue 移动端实现手写签名效果，功能很完美，保存时保存为base64格式。

base64转file文件格式 vue中将base64转file文件格式

刚好项目用到此功能，就网上找了一下，清理了无用代码，简单方便，因为项目中多个地方需要使用，所以我将它整理为组件，通过ref和传值控制，下面代码我单独整理出来，可自行封装组件（只支持移动端，不支持pc端）。

代码中，css自行修改一下宽高，背景之类即可。

代码如下

<template><!-- 手写签名组件 --><div class="page sign-page"><div class="content"><div class="sign-wrap" id="signWrap"><canvas id="myCanvas" width="100%" height="100%"></canvas></div></div><div class="con-btn"><span class="staging-btn size14" @click="clearArea()">清除签名</span><span class="submit-btn size14" @click="saveSign()">确认签名</span></div></div>
</template>

<script>
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(); // 比较值相等则为空},},
};
</script>

<style lang="scss" scoped>
.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;}}
}</style>

原文围观地址 http://www.sharedblog.cn/post/217.html

个人博客http://sharedblog.cn/

软件下载http://iqzhan.com/

H5移动端项目实现手写签名功能 vue实现手写签名相关推荐

html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
H5移动端项目案例、web手机微商城实战开发
自微信生态圈一步步强大后,关于移动端购物的趋势,逐渐成为大众关心的内容,目前市场上关于移动商城的制定就有大量版本,比如.微商城.移动商城.移动webAPP.微信商城各等各种定义层出不穷,这就对于移动端 ...
OpenShift 4 - 为集群配置镜像签名功能，只能运行被签名的本地镜像
<OpenShift 4.x HOL教程汇总> 说明:本文已经在OpenShift 4.8环境中验证文章目录配置签名环境安装镜像签名的Operator 为集群指定签名用的 sigst ...
mysql数据签名功能_typecho添加用户个人签名功能，具体实现
最近需要实现的一个需求,本来我想通过插件的形式实现,然而typecho的个人设置页面没有可以调出代码的钩子,研究来研究去,还是决定改内部程序了,毕竟以实现需求为主要目的,而非在维持程序不变的情况下.所 ...
解决 react h5移动端项目 fastclick点击多次才生效的问题
项目背景 react框架编写的移动端h5项目项目中引用了fastclick.js 使用 input type="file" 用户上传头像 faskclick实现原理 fastcl ...
vue H5移动端项目真机测试配置
vue cli2 1.配置网段:(手机和电脑在同一局域网内) 2.在项目中重启命令行(或者cmd)运行 ipconfig 获取到项目在本机运行的ip地址 3.关闭防火墙 4.前端:config文件夹下 ...
vue H5移动端项目使用高德地图定位/标点并点击导航跳第三方app且实现导航路线——实例
一.最终效果 1.全量定位 2.获取当前位置定位 3.标点后回显选点的地址 4.点击导航,打开弹窗选择高德地图,会进入第三方app中显示路线 5.地图已经封装成一个组件(AMapComponents) ...
Vue 移动端项目调用扫一扫功能（可条形码）
前言: 项目需求扫描机器条形码,获取编号进行搜索,刚开始获取返回值不完整,后来发现要设置一下filter 提示plus方法要进行真机测试如果plus没有找到的话,可以用原生监听. document. ...
js 实现 H5 div的内容放大缩小拖拽功能 vue可用
大佬写的组件 , 虽然我看不懂但不妨碍我会用啊想去看大佬代码的点这里下面的无脑的代码时刻一.复制代码到一个单独的.vue文件然后走人去下一步 // 放大缩小页面组件 <template ...

H5移动端项目实现手写签名功能 vue实现手写签名

H5移动端项目实现手写签名功能 vue实现手写签名相关推荐

最新文章

热门文章