vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫簽名

更新時(shí)間：2020年09月22日 12:02:54 作者：95後開(kāi)發(fā)妹紙～

這篇文章主要為大家詳細(xì)介紹了基于vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

基于vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫簽名！

之前自己開(kāi)發(fā)有這么一個(gè)需求，需要實(shí)現(xiàn)手寫簽名，然后以圖片的形式保存生成圖片的base64數(shù)據(jù)流。自己在網(wǎng)上找了一堆，都不是很完美。然后參考網(wǎng)上的加自己的優(yōu)化和修改做了一版。希望有需要的朋友可以拿來(lái)直接用。

HTML部分：

<template>
 <div class="hello" >
  <div>請(qǐng)輸入您的簽名7：</div>
    <canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas畫(huà)板</canvas>
  <img v-bind:src="url" alt="">
  <div>
    <button type="" v-on:click="clear">重寫</button>
    <button v-on:click="save">保存簽名</button>
  </div>
 </div>
 
</template>

為了節(jié)約時(shí)間，樣式寫的比較簡(jiǎn)單。湊合看吧！

script部分

<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, false); 
      that.drawBegin(event)
    })
    this.canvas.addEventListener('touchend', function(event) { 
      document.addEventListener('touchend', preHandler, false); 
      that.drawEnd()
      
    })
    this.clear(btn)
  }
  drawBegin(e) {
    var that = this;
    window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.cxt.strokeStyle = "#000"
    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(ev){
      ev.preventDefault()
      that.drawing(event)
    })
  }
  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, false); 
    document.removeEventListener('touchend', preHandler, false);
    document.removeEventListener('touchmove', preHandler, false);
  }
  clear(btn) {
    this.cxt.clearRect(0, 0, this.stage_info.width, this.stage_info.height)
    // this.cxt.clearRect(0, 0, 373, 200)
  }
  save(){
    return canvas.toDataURL("image/png")
    console.log(canvas.toDataURL("image/png"))
  }
}

export default {
 data () {
  return {
   msg: '啦啦啦',
   val:true,
   url:""
  }
 },
 mounted() {
   draw=new Draw('canvas');
   draw.init();
 },
 methods:{
  clear:function(){
    draw.clear();
    // 用于點(diǎn)擊清除畫(huà)布時(shí)，同時(shí)清除上次保存的圖片
    this.save()
  },
  save:function(){
    var data=draw.save();
    this.url = data;
    // 生成圖片的base64數(shù)據(jù)流 
  },
　　mutate(word){
    this.$emit("input", word);
  },
 }
}
</script>

css部分

<style scoped lang="less">
  .hello{
    height: 100%;
    width: 100%;
    background: #ccc;
      h1, h2 { font-weight: normal; } 
      ul { list-style-type: none; padding: 0; } 
      li { display: inline-block; margin: 0 10px; } 
      a { color: #42b983; } 
      #canvas { background: pink; cursor: default; } 
      #keyword-box { margin: 10px 0; } 
      button{font-size: 0.2rem;color: blue;}
 }

效果圖：