vue移動端canvas繪制簽名插件：signature_pad

效果圖

1.下載：npm install --save signature_pad

2.引入並使用

<template>
  <div>
    <div style="border: 1px solid #eee" ref="canvasBox">
      <canvas class="canvasId"/>
    </div>
    <div class="btnBox">
      <van-button round type="info" @click="clear">重簽</van-button>
      <van-button round type="info" @click="save">確定</van-button>
    </div>
  </div>
</template>

<script>
  import SignaturePad from 'signature_pad';
  import {Button,Notify} from 'vant'
    export default {
        name: "signature",
      components: {
        [Button.name]:Button,
        [Notify.Component.name]: Notify.Component,
      },
      data () {
        return {
          SignaturePad:null,
          config:{
            penColor: "#000000",   //筆刷顏色
            minWidth:3,       //最小寬度
          }
        }
      },
      mounted() {
        this.getCanvas()
      },
      methods: {
        getCanvas() {
          var canvas = document.querySelector('.canvasId');
          this.signaturePad = new SignaturePad(canvas, this.config);
          canvas.height = 200;
          canvas.width = this.$refs.canvasBox.clientWidth;
        },
        //保存
        save(){
          //默認保存為png格式
          // console.log(this.signaturePad.toDataURL())
          // console.log(this.signaturePad.toDataURL('image/jpeg'))
          // console.log(this.signaturePad.toDataURL('image/svg+xml'))
          // console.log(this.signaturePad.isEmpty())  //判斷畫布有沒有內容,布爾型
          if(this.signaturePad.isEmpty()){
            Notify({ type: 'danger', message: '電子簽名不能為空' });
          }else{
            this.$emit('setSign',this.signaturePad.toDataURL())
          }

        },
        //清除
        clear() {
          //清除畫布內容
          this.signaturePad.clear();
        },
      }
    }
</script>

<style scoped lang="scss">
  .btnBox {
    padding: 10px;
    text-align: center;
  /deep/ .van-button--info {
    height: 30px;
    padding: 0 30px;
  &:first-child {
     margin-right: 30px;
   }
  }
  }
</style>

 3.父組件接收簽名圖片