vue+canvas實現移動端手寫簽名

本文實例為大家分享了vue+canvas實現移動端手寫簽名的具體代碼，供大家參考，具體內容如下

        個人簽名    重置確定          提 交 0,      contractSuccess: this.$route.query.contractSuccess,     }    },    mounted() {     let canvas = this.$refs.canvasF     canvas.height = this.$refs.canvasHW.offsetHeight -0     canvas.width = this.$refs.canvasHW.offsetWidth - 0     this.canvasTxt = canvas.getContext('2d')     this.canvasTxt.lineWidth = 4     this.stageInfo = canvas.getBoundingClientRect()    },    methods: {     goBack(){      this.$router.go(-1)      // session.clear()     },     //mobile     touchStart(ev) {      ev = ev || event      ev.preventDefault()      if (ev.touches.length == 1) {       let obj = {        x: ev.targetTouches[0].clienX,        y: ev.targetTouches[0].clientY,       }       this.startX = obj.x       this.startY = obj.y       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)      }     },     touchMove(ev) {      ev = ev || event      ev.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.y       this.moveX = obj.x       this.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.y       this.startX = obj.x       this.points.push(obj)      }     },     touchEnd(ev) {      ev = ev || event      ev.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)      }     },     //pc     mouseDown(ev) {      ev = ev || event      ev.preventDefault()      if (1) {       let obj = {        x: ev.offsetX,        y: ev.offsetY       }       this.startX = obj.x       this.startY = obj.y       this.canvasTxt.beginPath()       this.canvasTxt.moveTo(this.startX, this.startY)       this.canvasTxt.lineTo(obj.x, obj.y)       this.canvasTxt.stroke()          // this.canvasTxt.strokeRect(20,20,80,100);       this.canvasTxt.closePath()       this.points.push(obj)       this.isDown = true      }     },     mouseMove(ev) {      ev = ev || event      ev.preventDefault()      if (this.isDown) {       let obj = {        x: ev.offsetX,        y: ev.offsetY       }       this.moveY = obj.y       this.moveX = obj.x       this.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.y       this.startX = obj.x       this.points.push(obj)      }     },     mouseUp(ev) {      ev = ev || event      ev.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 = []     },     //確定簽名     commit() {      this.imgUrl=this.$refs.canvasF.toDataURL();      this.imgUrlList.push(this.imgUrl)      if(this.imgUrlList.length>0){       this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)       this.points = []      }     },     deleteAll(){      this.imgUrlList = []     },     // 提交簽名給前一頁     commitAll(){      // 用canvas合併多張圖片的base64為一張圖的base64      var canvas = document.createElement("canvas");      canvas.width = 75*this.imgUrlList.length;      canvas.height = 100;      var context = canvas.getContext("2d");         context.rect(0 , 0 , canvas.width , canvas.height);      context.fillStyle = "#fff";      context.fill();         var myImage = new Image();      myImage.crossOrigin = 'Anonymous';      // 當簽名列表有值時      if(this.imgUrlList.length>0){       for(let i = 0;i{        Bus.$emit('signImage',base64) //簽名base64傳給前一頁       }, 300)      }     }    },    beforeDestroy(){     // 銷燬bus     Bus.$off()    }  }" _ue_custom_node_="true">

重置就是清除田字格當前字，確定就將字保存為一張圖片base64排列在列表。

重籤就是刪除列表所有圖片，提交就是將多張圖合併為一張且傳給前一頁顯示。