fabric 电子签

1、引入第三方库

// npm 安装fabric.js
npm install fabric --save


// yarn 安装fabric.js
yarn add fabric --save

2、代码实现

  2-1、HTML

<canvas ref="verify" id="canvas" width="450" height="240" style="border: 1px solid red"> </canvas>
<img :src="dataUrls" style="position: absolute; top: 118px; border: 1px solid"/>
<button @click="saveSigna()">保存签名</button>
<button @click="clearBtn()">清除</button>

  2-2、JS

import { fabric } from "fabric";

export default {
  name: "HelloWorld",
  data() {
    return {
      dataUrls: "",
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.canvas = new fabric.Canvas("canvas", {
      isDrawingMode: true,
    });
  },
  methods: {
    // 清楚事件
    clearBtn() {
      const ctx = this.$refs.verify.getContext("2d");
      ctx.clearRect(0, 0, 450, 240);
      ctx.beginPath();
      this.canvas._objects = [];
    },
    // 保存事件
    saveSigna() {
      // console.log(this.canvas);
      if (this.canvas._objects.length > 0) {
        let dataUrl = this.canvas.toDataURL({
          format: "png",
          quality: 1,
          enableRetinaScaling: 1,
          multiplier: 1,
        });

        this.dataUrls = dataUrl;
        this.changeToImage(this.dataUrls);
      } else {
        alert("画板不能为空");
      }
    },

    changeToImage(base64) {
      this.clearBtn();
      return `data:image/png;base64,${base64}`;
    },
  },
};