vue使用canvas画布实现电子版签名

目录

canvas组件介绍

使用canvas实现电子版签名

---

canvas组件介绍

canvas组件是一个可以自定义width、height 的矩形画布，画布左上角为原点（0，0），水平向右为X轴，垂直向下为Y轴。

可以去看看这篇博客：https://blog.csdn.net/openharmony/article/details/124118356

使用canvas实现电子版签名

代码实现：

<template>
  <div style="width: 500px; height: 400px; border: 1px solid black">
    <!-- 创建画布 -->
    <canvas
      ref="canvas"
      class="jSignature"
      tabindex="0"
      @mousedown="onMouseDown"
      :style="{ border: '1px solid #000' }"
    />
    <footer class="dialog-footer">
      <el-button type="danger" @click="clearPanel">清空签名</el-button>
      <el-button type="primary" @click="confirm">确认签名</el-button>
      <el-button @click="clearPanel">取消</el-button>
    </footer>
    <!-- img显示签名后的图片 -->
    <img class="imgCanvas" :src="imgUrl" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick } from "vue";
export default defineComponent({
  name: "CanvasTest",
  setup() {
    const canvas = ref();
    const imgUrl = ref();

    // 开始签名(按下鼠标)
    function onMouseDown(e: any) {
      //Firefox下,event对象有target属性;IE下,event对象有srcElement属性
      //类似document.getElementById("")，用来捕获鼠标的活动标记
      const el = e.target || e.srcElement;
      const ctx = el.getContext("2d"); //获取画笔的方法 获取CanvasRenderingContext2D对象完成2D图像绘制
      ctx.beginPath(); //激活绘制
      ctx.moveTo(e.offsetX, e.offsetY); //路径移动到画布的指定点
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke(); //绘制边框
      el.onmousemove = function (e: any) {
        if (e.which === 0) {
          el.onmousemove = null;
          el.onmouseup = null;
          return;
        }
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
      };
      el.onmouseup = function () {
        el.onmousemove = null;
        el.onmouseup = null;
      };
      el.focus();
    }

    // 清空签名
    function clearPanel(e: any) {
      //数据更新后执行回调，下次更新dom结束之前延迟回调，在上次dom更新完才调用获取新的dom
      nextTick(() => {
        // const el = canvas;
        const ctx = canvas.value.getContext("2d");
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height); //清除画布指定区域绘画
        imgUrl.value = null; //让下方显示的签名图片也消失
      });
    }

    // 确认签名
    function confirm() {
      nextTick(() => {
        try {
          const blank = document.createElement("canvas"); // 创建一个空canvas对象
          blank.width = canvas.value.width;
          blank.height = canvas.value.height;
          imgUrl.value = canvas.value.toDataURL(); //显示图片地址为画布中对象转化的地址
        } catch (e) {
          console.warn(e);
        }
      });
    }
    return { onMouseDown, confirm, clearPanel, canvas, imgUrl };
  },
});
</script>

实现效果：