vue在移动端实现电子签名手写板

因项目需求需要实现电子签名，记录手绘笔迹并保存为base64图片(因是移动端项目，在浏览器调试的时候必须打开移动设备模式，否则绘制不了)

<template><div><div class="signature"><div id="canvas"></div></div><button id="clearCanvas">重新签名</button><button id="saveCanvas" @click="saveSign">确定保存</button></div>
</template><script>
export default {data() {return {};},mounted() {this.init_lineCanvas();},methods: {// 保存签名saveSign() {setTimeout(() => {this.imgBase64 = localStorage.getItem("imgBase64");/* 电子签名base64图片上传*///接口上传}, 500);},init_lineCanvas() {document.addEventListener("touchmove",function(event) {event.preventDefault();},{ passive: false });new this.lineCanvas({el: document.getElementById("canvas"), // 绘制canvas的父级divclearEl: document.getElementById("clearCanvas"), // 清除按钮saveEl: document.getElementById("saveCanvas"), // 保存按钮linewidth: 3, // 线条粗细，选填color: "black", // 线条颜色，选填background: "#ffffff" // 线条背景，选填});},/* 电子签名手写板 */lineCanvas(obj) {this.linewidth = 1;this.color = "#000000";this.background = "#ffffff";for (var i in obj) {this[i] = obj[i];}this.canvas = document.createElement("canvas");this.el.appendChild(this.canvas);this.cxt = this.canvas.getContext("2d");this.canvas.width = 333;this.canvas.height = 207;this.cxt.fillStyle = this.background;this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);this.cxt.strokeStyle = this.color;this.cxt.lineWidth = this.linewidth;this.cxt.lineCap = "round";// 开始绘制this.canvas.addEventListener("touchstart",function(e) {console.log('开始绘制')this.cxt.beginPath();this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);}.bind(this),false);// 绘制中this.canvas.addEventListener("touchmove",function(e) {this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);this.cxt.stroke();}.bind(this),false);// 结束绘制this.canvas.addEventListener("touchend",function() {console.log('结束绘制')this.cxt.closePath();}.bind(this),false);// 清除画布this.clearEl.addEventListener("click",function() {console.log('清除画布')this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);}.bind(this),false);document.getElementById("clearCanvas").click();// 保存图片，直接转base64this.saveEl.addEventListener("click",function() {var imgBase64 = this.canvas.toDataURL();console.log("保存签名成功" + imgBase64);// sessionStorage.setItem("imgBase64", imgBase64);}.bind(this),false);}}
};
</script><style>
.signature {width: 100%;height: 240px;background: #fff;margin-top: 5px;margin-bottom: 10px;position: relative;padding-top: 10px;
}#canvas canvas {display: block;background: #f3f3f3;border-radius: 8px;margin: 0 auto;
}#clearCanvas {font-size: 17px;color: #d3b88a;background-image: linear-gradient(-180deg, #6e6e6e 0%, #484848 100%);
}#saveCanvas {font-size: 17px;color: #ffffff;background-image: linear-gradient(-180deg, #d9c197 0%, #ceb181 100%);
}
</style>

附：HTML5 canvas支持触摸屏的签名涂鸦插件HTML5 canvas支持触摸屏的签名涂鸦插件

vue在移动端实现电子签名手写板相关推荐

android h5 禁止缩放,vue h5移动端禁止缩放代码
vue h5移动端禁止缩放代码安卓在index.html里面写 ios 在APP.vue里面写 window.onload = function() { document.addEventList ...
vue 实现 web端滚动刷新自定义指令
vue 实现 web端滚动刷新想实现web端的滚动刷新,我们需要判断滚动已经到达最低部,利用addEventListener监听滚动高度,触发相应的回调函数,激发加载更多数据,那么我们该怎样计算滚动 ...
vue 实现 web端滚动刷新排序筛选响应式布局 (源码)
vue 实现 web端滚动刷新排序筛选响应式布局先展示效果图源码: <template><div> <div class=&qu ...
android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
html仿微信滑动删除,使用Vue实现移动端左滑删除效果附源码
左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 ...
[vue] 在移动端使用vue，你觉得最佳实践有哪些？
[vue] 在移动端使用vue,你觉得最佳实践有哪些? vant,mint,uniapp 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
Vue与服务端数据交互 [ axios ]
Vue生命周期每个Vue实例在被创建到销毁要经过一系列的过程,这整个过程称为Vue实例的生命周期 Vue在生命周期不同的阶段点会自动运行一些函数, 这些函数称为Vue生命周期的钩子(hook)函数 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
手机端html返回顶部,vue实现移动端返回顶部
本文实例为大家分享了vue实现移动端返回顶部的具体代码,供大家参考,具体内容如下 HTML: 1 ▲ JS: export default { data() { return { isShow: tr ...

vue在移动端实现电子签名手写板

vue在移动端实现电子签名手写板相关推荐

最新文章

热门文章