当前位置：首页 > VUE

vue实现签章

2026-03-07 05:20:54VUE

实现签章功能的基本思路

在Vue中实现签章功能通常涉及以下几个关键步骤：使用Canvas绘制签名、保存签名数据、将签名应用到文档或图片中。以下是具体实现方法。

使用Canvas绘制签名

创建一个Vue组件，包含Canvas元素用于手写签名。通过监听鼠标或触摸事件来捕获用户绘制路径。

<template>
  <div>
    <canvas 
      ref="canvas"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="stopDrawing"
      @mouseleave="stopDrawing"
      @touchstart="startDrawing"
      @touchmove="draw"
      @touchend="stopDrawing"
    ></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.setupCanvas();
  },
  methods: {
    setupCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
      ctx.strokeStyle = '#000';
      ctx.lineWidth = 2;
      ctx.lineCap = 'round';
      ctx.lineJoin = 'round';
    },
    startDrawing(e) {
      this.isDrawing = true;
      const canvas = this.$refs.canvas;
      const rect = canvas.getBoundingClientRect();
      this.lastX = e.clientX - rect.left;
      this.lastY = e.clientY - rect.top;
    },
    draw(e) {
      if (!this.isDrawing) return;
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const rect = canvas.getBoundingClientRect();
      const currentX = e.clientX - rect.left;
      const currentY = e.clientY - rect.top;
      ctx.beginPath();
      ctx.moveTo(this.lastX, this.lastY);
      ctx.lineTo(currentX, currentY);
      ctx.stroke();
      this.lastX = currentX;
      this.lastY = currentY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

保存签名数据

将Canvas绘制的签名转换为Base64格式的图片数据，便于存储或传输。

vue实现签章

methods: {
  saveSignature() {
    const canvas = this.$refs.canvas;
    const signatureData = canvas.toDataURL('image/png');
    this.$emit('save', signatureData);
  },
  clearSignature() {
    const canvas = this.$refs.canvas;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  },
}

将签名应用到文档或图片

将保存的签名数据叠加到目标文档或图片上。可以通过CSS定位或Canvas合成实现。

<template>
  <div>
    <img :src="documentImage" class="document" />
    <img :src="signatureData" class="signature" />
  </div>
</template>

<style>
.document {
  position: relative;
  width: 100%;
}
.signature {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 150px;
  height: auto;
}
</style>

使用第三方库简化实现

如果需要更复杂的功能（如压力感应、笔锋效果），可以使用专门的签名库如signature_pad。

vue实现签章

安装库：

npm install signature_pad

在Vue中使用：

import SignaturePad from 'signature_pad';

export default {
  mounted() {
    const canvas = this.$refs.canvas;
    this.signaturePad = new SignaturePad(canvas);
  },
  methods: {
    saveSignature() {
      const signatureData = this.signaturePad.toDataURL();
      this.$emit('save', signatureData);
    },
    clearSignature() {
      this.signaturePad.clear();
    },
  },
};