vue实现页面签字

Vue 实现页面签字功能

使用 canvas 实现手写签字

在 Vue 项目中，可以通过 HTML5 的 canvas 元素实现手写签字功能。创建一个 Vue 组件，包含 canvas 元素和必要的交互逻辑。

<template>
  <div>
    <canvas 
      ref="signaturePad" 
      @mousedown="startDrawing" 
      @mousemove="draw" 
      @mouseup="stopDrawing"
      @touchstart="startDrawing" 
      @touchmove="draw" 
      @touchend="stopDrawing"
    ></canvas>
    <button @click="clearCanvas">清除</button>
    <button @click="saveSignature">保存</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
    };
  },
  mounted() {
    this.setupCanvas();
  },
  methods: {
    setupCanvas() {
      const canvas = this.$refs.signaturePad;
      canvas.width = 500;
      canvas.height = 300;
      this.ctx = canvas.getContext('2d');
      this.ctx.strokeStyle = '#000';
      this.ctx.lineWidth = 2;
      this.ctx.lineCap = 'round';
    },
    startDrawing(e) {
      this.isDrawing = true;
      const canvas = this.$refs.signaturePad;
      const rect = canvas.getBoundingClientRect();
      this.lastX = (e.clientX || e.touches[0].clientX) - rect.left;
      this.lastY = (e.clientY || e.touches[0].clientY) - rect.top;
    },
    draw(e) {
      if (!this.isDrawing) return;
      const canvas = this.$refs.signaturePad;
      const rect = canvas.getBoundingClientRect();
      const currentX = (e.clientX || e.touches[0].clientX) - rect.left;
      const currentY = (e.clientY || e.touches[0].clientY) - rect.top;

      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(currentX, currentY);
      this.ctx.stroke();

      this.lastX = currentX;
      this.lastY = currentY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
    clearCanvas() {
      const canvas = this.$refs.signaturePad;
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    saveSignature() {
      const canvas = this.$refs.signaturePad;
      const image = canvas.toDataURL('image/png');
      this.$emit('save', image);
    }
  }
};
</script>

使用第三方库 signature_pad

对于更专业的签字功能，可以使用 signature_pad 库。该库提供了更丰富的功能和更好的兼容性。

安装 signature_pad：

npm install signature_pad

在 Vue 组件中使用：

<template>
  <div>
    <canvas ref="signaturePad"></canvas>
    <button @click="clear">清除</button>
    <button @click="save">保存</button>
  </div>
</template>

<script>
import SignaturePad from 'signature_pad';

export default {
  data() {
    return {
      signaturePad: null,
    };
  },
  mounted() {
    const canvas = this.$refs.signaturePad;
    canvas.width = 500;
    canvas.height = 300;
    this.signaturePad = new SignaturePad(canvas);
  },
  methods: {
    clear() {
      this.signaturePad.clear();
    },
    save() {
      if (this.signaturePad.isEmpty()) {
        alert('请先签字');
        return;
      }
      const image = this.signaturePad.toDataURL('image/png');
      this.$emit('save', image);
    }
  }
};
</script>

移动端适配

对于移动端设备，需要添加 touch 事件的支持。上述代码已经包含了 touch 事件的处理，确保在移动设备上也能正常使用。

保存签字图片

签字完成后，可以将 canvas 转换为 base64 编码的图片数据，用于保存或上传到服务器。通过调用 canvas 的 toDataURL 方法实现。

const image = canvas.toDataURL('image/png');

可以将该图片数据通过事件传递给父组件，或直接发送到后端服务器。

样式优化

为 canvas 添加边框和背景色，提升用户体验：

canvas {
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

注意事项

• 确保 canvas 的宽度和高度在 mounted 钩子中设置，避免渲染问题。
• 对于移动端，考虑添加 preventDefault 以防止页面滚动干扰签字。
• 签字数据保存前，检查是否为空，避免保存空白签字。