前端VUE实现电子签名

1，引入第三方库来实现

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

2，代码实现
在页面引入

import { fabric } from "fabric";

<template>
<canvas id="canvas" width="450" height="240"></canvas>
<button @click="saveSignature">保存签名</button>
<img :src="dataUrls" />//在这里就能预览签名的图片了
</template>

 data() {
    return {
      dataUrls: "",
    };
  },
 mounted() {
    // 实例化fabric canvas
    this.canvas = new fabric.Canvas("canvas", {
      isDrawingMode: true,//表示可以进行绘图操作。
    });
  },
   methods: {
    // 保存签名
    saveSignature() {
      const dataUrl = this.canvas.toDataURL({
        format: "png",
        quality: 1,
        enableRetinaScaling: 1,
        multiplier: 1,
      });
      // 签名数据保存为图片
      this.dataUrls = dataUrl;
      this.changeToImage(this.dataUrls);
      // console.log(dataUrl);
    },

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

首先在template中添加了一个div，用来显示签名区域。然后通过fabric库实例化了一个canvas，设置isDrawingMode为true，表示可以进行绘图操作。

methods中，实现了保存签名的方法，通过canvas.toDataURL()方法将签名数据转化为base64编码的png图片，