vue 电子签名

本文主要是介绍vue 电子签名，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

<template>
<div>
<button id="btn" @click="nameFun">点击签字</button><div class="mask" v-show="mask"></div><div :class="canvasShow==true? 'canvasBox1 show1':'canvasBox1'"><div class="canvasBox" ref="canvasHW"><canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp"></canvas></div><div class="btnBox"><p @click="overwrite">重写</p><p @click="close">关闭</p><p @click="commit">提交</p></div></div>
</div>
</template>
<script>
import { Dialog } from 'vant';
import { Toast } from 'vant';
export default {data() {return {canvasShow: false,client: {},points: [],canvasTxt: null,startX: 0,startY: 0,moveY: 0,moveX: 0,endY: 0,endX: 0,w: null,h: null,isDown: false,mask: false,}},methods: {nameFun() {this.canvasShow = true;this.mask = true;this.screen = true;},//mobiletouchStart(ev) {ev = ev || eventev.preventDefault()if (ev.touches.length == 1) {let obj = {x: ev.targetTouches[0].clienX,y: ev.targetTouches[0].clientY,}this.startX = obj.xthis.startY = obj.ythis.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 || eventev.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.ythis.moveX = obj.xthis.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.ythis.startX = obj.xthis.points.push(obj)}},touchEnd(ev) {ev = ev || eventev.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)}},//pcmouseDown(ev) {ev = ev || eventev.preventDefault()if (1) {let obj = {x: ev.offsetX,y: ev.offsetY}this.startX = obj.xthis.startY = obj.ythis.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 || eventev.preventDefault()if (this.isDown) {let obj = {x: ev.offsetX,y: ev.offsetY}this.moveY = obj.ythis.moveX = obj.xthis.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.ythis.startX = obj.xthis.points.push(obj)}},mouseUp(ev) {ev = ev || eventev.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 = []},//提交签名dataURLtoFile(dataurl, filename) { // 将base64转换为file文件let arr = dataurl.split(',')let mime = arr[0].match(/:(.*?);/)[1]let bstr = atob(arr[1])let n = bstr.lengthlet u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, { type: mime })},commit() {var that = this;this.imgUrl = this.$refs.canvasF.toDataURL();console.log(this.$refs.canvasF.toDataURL()) //签名img回传后台this.canvasShow = false;this.mask = false;this.screen = false;var base64Img = this.$refs.canvasF.toDataURL();var picName = 'pic.png'var files = this.dataURLtoFile(base64Img, picName);let formData = new FormData();formData.append("file", files);var config = {headers: { 'Content-Type': 'multipart/form-data' }}; //添加请求头that.$http.post('/api/wxappservice/api/file/upload/image', formData, config).then(function(res) {if (res.data.code == 5000) {that.namePic = res.data.data;console.log('返回路径');console.log(res.data.data);}}, (error) => {console.log(error);});},//关闭close() {this.canvasShow = false;this.mask = false;this.screen = false;},}
}

结束语：

好了，电子签名就到这里啦，希望这篇文章能帮助到大家。

喜欢的加个关注，点个收藏，给个赞~ 大家一起成长

这篇关于vue 电子签名的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---