vue项目中使用canvas进行签名的完整例子(用于移动端)

页面大致长这个样子

注：如果直接使用代码，记得下载element的依赖包以及引入对应的样式，也可以将涉及到element组件的地方去掉

直接上代码：

<template>
  <div class="sign_page">
    <div class="canvas_page" >
      <!---->
      <div class="handCenter">
        <canvas id="myCanvas" ></canvas>
      </div>
      <div class="reWriteBtnLine">
        <el-button class="reWriteBtn" size="medium" type="primary"  @click.stop="clearArea">重写</el-button>
        <!-- <el-button class="reWriteBtn" size="medium" type="primary"  @click.stop="saveImageInfo">获取图片临时链接</el-button> -->
      </div>
    </div>
    <div class="button_line">
      <!--按钮-->
      <el-button type="primary" class="toPreStep reWriteBtn" @click="toPreStep">上一步</el-button>
      <el-button type="primary" class="reWriteBtn" @click="toNextStep">上传签名</el-button>
    </div>
  </div>
</template>

<script>
let that = null;
export default {
  data () {
    return {
   		//判断是否在进行绘制动作
      	touchPressed:false,
      	//画布实体
		ctx:null,
		//线条的颜色
		strokeStyle:'#000',
		//线条的粗细
		lineWidth:4,
		lastX:null,
		lastY:null,
		canvas:null
    }
  },
  mounted(){
    that = this;
    this.$nextTick(() => {
		let canvas = document.getElementById('myCanvas');
		this.canvas = canvas;
		this.ctx = canvas.getContext('2d');
		// let winW = window.innerWidth;
	    // let winH = window.innerHeight;
	    let node = document.getElementsByClassName('handCenter')[0];
	    let rect = node.getBoundingClientRect();
	    console.log(rect,'rect')
	    let winW = rect.width;
	    let winH = rect.height
		canvas.width = winW;
       canvas.height = winH;

      //由于只要获得签名，所以不需要
      // this.ctx.fillStyle = '#fff';
      // this.ctx.fillRect(0,0,winW,winH);

			this.Init()
	});
  },
  methods:{
    Init() {
			this.canvas.addEventListener(
				'touchstart',
				(event)=> {
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，重要
						var touch = event.targetTouches[0];
						this.touchPressed = true;
						this.draw(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.offsetTop, false);
					}
				},
				false
			);
			this.canvas.addEventListener(
				'touchmove',
				(event) =>{
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，重要
						var touch = event.targetTouches[0];
						if (this.touchPressed) {
							this.draw(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.offsetTop, true);
						}
					}
				},
				false
			);
			this.canvas.addEventListener(
				'touchend',
				**(event)=> {
					if (event.targetTouches.length == 1) {
						event.preventDefault(); // 阻止浏览器默认事件，防止手写的时候拖动屏幕，重要
						this.touchPressed = false;
					}
				},
				false
			);
    },
     //上一步
    toPreStep(){
      this.$router.go(-1)
    },
    //下一步
    toNextStep(){
      let res = this.ifDraw();
      console.log(res)
      if(res){
        this.$message.warning('请写下你的签名')
        return
      }
      this.$confirm('确认当前的签名无误且清晰?', '提示')
      .then(() => {
        console.log("上传签名")
        let url = this.canvas.toDataURL();
        let file = this.dataURLtoFile(url);
        console.log(file)
        //暂时使用直接下载
        // this.openLoading()
        this.saveImageInfo();
      })
      .catch(action => {
          //console.log(action)
      });
    },
     //转成 File 对象
    dataURLtoFile(dataurl) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      // 这里的 'share.png' 是自定义的文件名
      return new File([u8arr], 'aa' + '.png',{ type: mime });
    },
	draw(x, y, isDown) {
		let ctx = this.ctx
		if (isDown) {
			ctx.beginPath();
			ctx.strokeStyle = this.strokeStyle;
			ctx.lineWidth = this.lineWidth;
			ctx.lineJoin = "round";
			ctx.moveTo(this.lastX, this.lastY);
			ctx.lineTo(x, y);
			ctx.closePath();
			ctx.stroke();
		}
		this.lastX = x; this.lastY = y;
	},
	clearArea(){
		this.ctx.setTransform(1, 0, 0, 1, 0, 0);
		this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
	},
	saveImageInfo(){
		let a = document.createElement('a');
    	a.href = this.canvas.toDataURL();
      //下面是下载的步骤
		a.download = "sign";
		a.click();
    },
    //判断是否绘制签名
    ifDraw(){
      var blank = document.createElement('canvas');
      blank.width = this.canvas.width;
      blank.height = this.canvas.height;**

      return this.canvas.toDataURL() == blank.toDataURL();
    },

  }
}
</script>

<style scoped lang="scss">
  .canvas_page{
    width:100vw;
    height:calc(100vh - 120px);
    box-sizing: border-box;
    .handCenter {
      overflow: hidden;
      max-width:90vw;
      height: calc(60vh - 100px);
      margin:0 auto;
      margin-top: 30px;
      box-shadow: 0 4px 12px rgba(0,0,0,.25);
      box-sizing: border-box;
    }
  }



</style>

<style  lang="scss">
   .reWriteBtnLine{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:40px 0 0;
  }
  /*重写的按钮*/
  .reWriteBtn{
    padding: 0.2rem 0.4rem!important;
    font-size:0.45rem!important;
    text-align: center;
  }
</style>

以上是这个demo的完整代码，下面是逐步的分解，做记录用：

that = this;
    this.$nextTick(() => {
		...
		let node = document.getElementsByClassName('handCenter')[0];
        let rect = node.getBoundingClientRect();
        ...
	});

1. 使用 getBoundingClientRect 方法 返回canvas外层容器 的大小及其相对于视口的位置，获得宽高，作为画布的宽高
2. dataURLtoFile 将画布转为文件流，可以用于后续的上传
3. 扩展 ,dataURLtoBlob 将画布转为blob流

//转成 blob 对象
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },

4. 比对画布上是否有内容:

	ifDraw(){
		var blank = document.createElement('canvas');
	    blank.width = this.canvas.width;
	    blank.height = this.canvas.height;**
	
	    return this.canvas.toDataURL() == blank.toDataURL();
	}