用 vue3 typescript 做一个表单,里面包含 canvas 签名图片,然后图片以 blob 格式发送给 API
时间: 2024-10-25 14:17:31 浏览: 24
在 Vue 3 中使用 TypeScript 开发一个表单,并包含用户签名的 Canvas,然后将 Canvas 转换为 Blob 并发送给 API,可以按照以下步骤进行:
1. **引入依赖**:
首先,安装 `vue-canvas-wrapper` 和 `axios` 库,用于操作Canvas和发送HTTP请求:
```bash
npm install vue-canvas-wrapper axios
```
2. **创建组件**
在组件中,导入相关模块并设置数据结构:
```typescript
import { createCanvasWrapper, Ref } from 'vue-canvas-wrapper';
import axios from 'axios';
export default {
data() {
return {
canvasRef: Ref<HTMLCanvasElement>(),
signatureBlob: null,
};
},
};
```
3. **初始化 Canvas**:
在模板部分创建一个 canvas 元素,并使用 `ref` 监听绘图事件:
```html
<canvas ref="canvasRef" @mousedown.capture="startDrawing" @mouseup="stopDrawing"></canvas>
```
4. **绘制签名**:
```typescript
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 数据:
```typescript
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.');
}
}
```
阅读全文