Vue使用Canvas实现电子签名功能示例

发布时间:2023年12月17日
当使用Vue来实现电子签名功能时,可以结合Canvas元素和Vue的数据绑定功能来实现。下面是一个简单的示例,演示了如何在Vue中使用Canvas实现电子签名功能:
<template>
  <div>
    <!-- Canvas元素用于绘制电子签名 -->
    <canvas
      ref="canvas"
      :width="canvasWidth"
      :height="canvasHeight"
      @mousedown="startDrawing"
      @mousemove="draw"
      @mouseup="finishDrawing"
    ></canvas>
    <!-- 清除按钮,点击后清除Canvas上的内容 -->
    <button @click="clearCanvas">Clear</button>
    <!-- 保存按钮,点击后保存签名数据 -->
    <button @click="saveSignature">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      canvasWidth: 400,
      canvasHeight: 200,
      drawing: false,
      signatureData: null
    };
  },
  methods: {
    // 开始绘制签名
    startDrawing(event) {
      this.drawing = true;
      const canvas = this.$refs.canvas;
      this.ctx = canvas.getContext('2d');
      this.ctx.beginPath();
      const x = event.offsetX;
      const y = event.offsetY;
      this.ctx.moveTo(x, y);
    },
    // 绘制签名
    draw(event) {
      if (this.drawing) {
        const x = event.offsetX;
        const y = event.offsetY;
        this.ctx.lineTo(x, y);
        this.ctx.stroke();
      }
    },
    // 完成绘制签名
    finishDrawing() {
      this.drawing = false;
    },
    // 清除Canvas上的内容
    clearCanvas() {
      const canvas = this.$refs.canvas;
      this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    // 保存签名数据
    saveSignature() {
      this.signatureData = this.$refs.canvas.toDataURL();
    }
  }
};
</script>

<style>
canvas {
  border: 1px solid #000;
}
</style>

总结:

当在Canvas画布上按下鼠标并移动时,会触发startDrawing和draw方法来绘制签名。当释放鼠标时,会触发finishDrawing方法来停止绘制。通过这些方法,便可以在Canvas上实现用户的手写签名。
另外,可以使用clearCanvas方法来清除Canvas上的内容,以及saveSignature方法来保存签名数据。saveSignature方法使用Canvas的toDataURL方法将Canvas上的内容转换为Base64编码的图片数据,并将其保存在signatureData属性中。
通过该示例,我们可以轻松地实现交互式的电子签名功能,并将签名数据保存在Vue的数据中,以便后续处理或展示。
文章来源:https://blog.csdn.net/qq_44577699/article/details/135010650
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。