基于Vue的移动端h5页面的电子签名

1、移动端h5页面效果图

2、上代码

<template><div><div ref="canvasBox" id="canvasBox"><canvas id="canvas" ref="canvas"></canvas></div><div class="row row-space-between"><button @click="clear">重签</button><button @click="save">确认</button></div></div>
</template>

<script>
var draw;
var preHandler = function (e) {e.preventDefault();
};
class Draw {constructor(el) {this.el = el;this.canvas = document.getElementById(this.el);this.cxt = this.canvas.getContext("2d");this.stage_info = canvas.getBoundingClientRect();this.path = {beginX: 0,beginY: 0,endX: 0,endY: 0,};}init(btn) {var that = this;this.canvas.addEventListener("touchstart", function (event) {document.addEventListener("touchstart", preHandler, {passive: false,});that.drawBegin(event);});this.canvas.addEventListener("touchend", function () {document.addEventListener("touchend", preHandler, {passive: false,});that.drawEnd();});this.clear(btn);}drawBegin(e) {var that = this;window.getSelection()? window.getSelection().removeAllRanges(): document.selection.empty();this.cxt.strokeStyle = "#333333";this.cxt.beginPath();this.cxt.moveTo(e.changedTouches[0].clientX - this.stage_info.left,e.changedTouches[0].clientY - this.stage_info.top);this.path.beginX = e.changedTouches[0].clientX - this.stage_info.left;this.path.beginY = e.changedTouches[0].clientY - this.stage_info.top;canvas.addEventListener("touchmove",function (event) {that.drawing(event);},{ passive: false });}drawing(e) {this.cxt.lineTo(e.changedTouches[0].clientX - this.stage_info.left,e.changedTouches[0].clientY - this.stage_info.top);this.path.endX = e.changedTouches[0].clientX - this.stage_info.left;this.path.endY = e.changedTouches[0].clientY - this.stage_info.top;this.cxt.stroke();}drawEnd() {document.removeEventListener("touchstart", preHandler, {passive: false,});document.removeEventListener("touchend", preHandler, {passive: false,});document.removeEventListener("touchmove", preHandler, {passive: false,});}clear() {this.base64Id = "";this.cxt.clearRect(0, 0, 343, 225);}save() {var blank = document.createElement("canvas"); //系统获取一个空canvas对象blank.width = canvas.width;blank.height = canvas.height;let flag = canvas.toDataURL("image/png") == blank.toDataURL(); //比较值相等则为空;if (flag) {return "0";} else {return canvas.toDataURL("image/png");}}
}
export default {data() {return {singImgUrl: "",};},methods: {clear() {draw.clear();this.base64Id = "";},save() {var data = "";data = draw.save();if (data == "0") {this.$toast("请先签名再点击确定哦~");} else {this.singImgUrl = data;///data 就是得到的base64格式的签名图片，根据业务这里可上传到服务器}},},mounted() {document.getElementById("canvasBox").addEventListener("touchmove",(e) => {e.preventDefault();},{ passive: false }); //阻止浏览器默认行为，防止签名浏览器下拉-------很重要this.base64Id = "";let _width = this.$refs.canvasBox.offsetWidth;let _height = this.$refs.canvasBox.offsetHeight;this.$refs.canvas.width = _width; //适配移动端宽度给canvasthis.$refs.canvas.height = _height; //适配移动端宽度给canvasdraw = new Draw("canvas");draw.init();},
};
</script>

<style lang="scss" scoped>
#canvasBox {width: 343px;height: 225px;background: #ffffff;border-radius: 3px;border: 1px solid #979797;
}
</style>

基于Vue的移动端h5页面的电子签名相关推荐

vue实现移动端H5页面截图
vue实现移动端H5页面截图 1.vue使用html2canvas实现移动端H5页面截图并下载. 2.html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏.这个html2canva ...
vue多页面开发_使用VUE进行移动端H5页面开发前准备
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...
移动端H5页面高清多屏适配方案
背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
移动端H5页面编辑器开发实战--原理结构篇
一.前言在去年10月份左右,接到了需求:开发一个H5移动端页面编辑器的任务,目的主要是解放公司内在制作这类网页的所投入的人力以及解决使用外部H5编辑器所涉及到的版权问题. 因此,一款能够与市面上已经 ...
html5 页面回退,一种基于浏览器堆栈管理的H5页面动态回退方法与流程
本技术应用于在浏览器运行的H5应用中,涉及浏览器的History历史堆栈管理技术,尤其是移动端H5应用在浏览器中的History历史堆栈管理技术. 背景技术: 移动端H5应用作为一款基于浏览器历史堆栈 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
【通用CSS模板】移动端H5页面统一样式.css
/*移动端H5页面统一样式----------------------------------------*/ @charset "UTF-8"; body, html, li, ...
音乐、视频播放模式切换实现方案及原理解析（基于vue、vuex、h5 audio）
音乐.视频播放模式切换实现方案及原理解析(基于vue.vuex.h5 audio) 播放模式有三种: 顺序播放随机播放单曲循环定义为一个playMode对象并向外暴露,内含三种播放模式,即为: ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
php清除h5格式,移动端H5页面端怎样除去input输入框的默认样式
这次给大家带来移动端H5页面端怎样除去input输入框的默认样式,移动端H5页面端除去input输入框的默认样式的注意事项有哪些,下面就是实战案例,一起来看一下. 前两天在开发在微信访问的HTML5页 ...

基于Vue的移动端h5页面的电子签名

1、移动端h5页面效果图

2、上代码

基于Vue的移动端h5页面的电子签名相关推荐

最新文章

热门文章