用 vue3 typescript 做一个表单，里面包含 canvas 签名图片，然后图片以 blob 格式发送给 API

在 Vue 3 中使用 TypeScript 开发一个表单，并包含用户签名的 Canvas，然后将 Canvas 转换为 Blob 并发送给 API，可以按照以下步骤进行：

1. **引入依赖**:
首先，安装 `vue-canvas-wrapper` 和 `axios` 库，用于操作Canvas和发送HTTP请求：

   npm install vue-canvas-wrapper axios

2. **创建组件**
在组件中，导入相关模块并设置数据结构：

   import { createCanvasWrapper, Ref } from 'vue-canvas-wrapper';
   import axios from 'axios';

   export default {
     data() {
       return {
         canvasRef: Ref<HTMLCanvasElement>(),
         signatureBlob: null,
       };
     },
   };

3. **初始化 Canvas**:
在模板部分创建一个 canvas 元素，并使用 `ref` 监听绘图事件：

   <canvas ref="canvasRef" @mousedown.capture="startDrawing" @mouseup="stopDrawing"></canvas>

4. **绘制签名**:

   methods: {
     startDrawing(e) {
       const context = this.canvasRef.value.getContext('2d');
       // 开始画布操作...
     },
     stopDrawing() {
       // 当用户停止点击，保存签名到 canvas 上
       const signatureDataUrl = this.canvasRef.value.toDataURL();
       // 转换为 Blob
       this.getBlobFromDataURL(signatureDataUrl);
     },
     
     getBlobFromDataURL(dataUrl: string): void {
       const img = new Image();
       img.src = dataUrl;
       img.onload = function() {
         const canvas = document.createElement('canvas');
         canvas.width = img.width;
         canvas.height = img.height;
         const ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
         const blob = canvas.toBlob();
         this.signatureBlob = blob; // 存储 Blob 到组件状态
       }.bind(this);
     },
   }

5. **发送 Blob 到 API**:
当准备好了 Blob，可以通过 Axios 发送 POST 请求，附带 Blob 数据：

   submitSignature() {
     if (this.signatureBlob) {
       axios.post('/api/signature', { signature: this.signatureBlob }, {
         headers: { 'Content-Type': 'application/octet-stream' },
       })
        .then(response => {
          console.log('Signature uploaded:', response.data);
        })
        .catch(error => {
          console.error('Error uploading signature:', error);
        });
     } else {
       console.warn('No signature available.');
     }
   }