vue实现电子签名、图片合成、及预览功能

<template>
  <div>
    <canvas ref="signatureCanvas"></canvas>
    <button @click="clearSignature">清除签名</button>
    <button @click="saveSignature">保存签名</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
 
export default {
  setup() {
    const signatureCanvas = ref(null);
    let ctx = null;
 
    const initCanvas = () => {
      const canvasEl = signatureCanvas.value;
      canvasEl.width = 400;
      canvasEl.height = 200;
      ctx = canvasEl.getContext('2d');
      ctx.strokeStyle = '#000';
      ctx.lineWidth = 2;
    };
 
    const drawSignature = (e) => {
      if (e.type === 'mousedown' && e.button === 0) {
        ctx.beginPath();
        ctx.moveTo(e.offsetX, e.offsetY);
        canvasEl['_' + e.type + 'Handler'] = (event) => {
          event.preventDefault();
          drawSignature(event);
        };
        document.addEventListener('mousemove', canvasEl['_' + e.type + 'Handler']);
      } else if (e.type === 'mouseup') {
        document.removeEventListener('mousemove', canvasEl['_' + 'mousedown' + 'Handler']);
      } else if (e.type === 'touchstart') {
        ctx.beginPath();
        ctx.moveTo(e.touches[0].pageX - canvasEl.offsetLeft, e.touches[0].pageY - canvasEl.offsetTop);
        canvasEl['_' + e.type + 'Handler'] = (event) => {
          event.preventDefault();
          drawSignature(event.touches[0]);
        };
        document.addEventListener('touchmove', canvasEl['_' + e.type + 'Handler']);
      } else if (e.type === 'touchend') {
        document.removeEventListener('touchmove', canvasEl['_' + 'touchstart' + 'Handler']);
      }
 
      ctx.lineTo(e.offsetX, e.offsetY);
      ctx.stroke();
    };
 
    const clearSignature = () => {
      ctx.clearRect(0, 0, signatureCanvas.value.width, signatureCanvas.value.height);
    };
 
    const saveSignature = async () => {
      const dataURL = signatureCanvas.value.toDataURL('image/png');
      // 使用html2canvas将canvas转换为图片
      try {
        const canvasImage = await html2canvas(signatureCanvas.value);
        // 处理转换后的图片，例如上传至服务器或进行其他操作
        console.log(canvasImage);
      } catch (error) {
        console.error('转换canvas为图片失败:', error);
      }
    };
 
    return {
      signatureCanvas,
      initCanvas,
      drawSignature,
      clearSignature,
      saveSignature
    };
  }
};
</script>

这个代码实例提供了一个简单的Vue组件，用于处理电子签名。它使用了<canvas>