vue使用canvas实现移动端手写签名

基于vue使用canvas实现移动端手写签名！

之前自己开发有这么一个需求，需要实现手写签名，然后以图片的形式保存生成图片的base64数据流。自己在网上找了一堆，都不是很完美。然后参考网上的加自己的优化和修改做了一版。希望有需要的朋友可以拿来直接用。

HTML部分：

				?

									<template>

									 <div class="hello" >

									  <div>请输入您的签名7：</div>

									    <canvas id="canvas" ref="canvasW" width="373" height="200" style="border:1px solid black" >Canvas画板</canvas>

									  <img v-bind:src="url" alt="">

									  <div>

									    <button type="" v-on:click="clear">重写</button>

									    <button v-on:click="save">保存签名</button>

									  </div>

									 </div>

									</template>

为了节约时间，样式写的比较简单。凑合看吧！

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();

									    // 用于点击清除画布时，同时清除上次保存的图片

									    this.save()

									  },

									  save:function(){

									    var data=draw.save();

									    this.url = data;

									    // 生成图片的base64数据流 

									  },

									　　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;}

									 }