From 6f81691ab09d586470426ee0bfa99cec83797f7b Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 23 六月 2025 15:52:24 +0800
Subject: [PATCH] 实验运行模块 图片换真实上传
---
laboratory/src/components/SignatureCanvas.vue | 71 ++++++++++++++++++++++++++---------
1 files changed, 52 insertions(+), 19 deletions(-)
diff --git a/laboratory/src/components/SignatureCanvas.vue b/laboratory/src/components/SignatureCanvas.vue
index 38570e1..6127630 100644
--- a/laboratory/src/components/SignatureCanvas.vue
+++ b/laboratory/src/components/SignatureCanvas.vue
@@ -32,6 +32,8 @@
</template>
<script>
+import { customUploadRequest, getFullUrl } from '@/utils/utils'
+import {editSignPicture} from './service'
export default {
name: 'SignatureCanvas',
props: {
@@ -163,30 +165,61 @@
this.drawDashedBorder()
},
+ // 新增：base64转blob
+ dataURLtoBlob(dataurl) {
+ const arr = dataurl.split(',');
+ const mime = arr[0].match(/:(.*?);/)[1];
+ const bstr = atob(arr[1]);
+ let n = bstr.length;
+ const u8arr = new Uint8Array(n);
+ while (n--) {
+ u8arr[n] = bstr.charCodeAt(n);
+ }
+ return new Blob([u8arr], { type: mime });
+ },
+
+ // 修改：确认签名时上传图片
confirmSignature() {
- const canvas = this.$refs.signatureCanvas
- const ctx = this.context
-
+ const canvas = this.$refs.signatureCanvas;
+ const ctx = this.context;
// 保存当前画布内容
- const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
-
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 先填充背景色
- ctx.fillStyle = 'rgba(239, 248, 250, 1)'
- ctx.fillRect(0, 0, canvas.width, canvas.height)
-
+ ctx.fillStyle = 'rgba(239, 248, 250, 1)';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
// 创建一个临时画布来保存签名内容
- const tempCanvas = document.createElement('canvas')
- tempCanvas.width = canvas.width
- tempCanvas.height = canvas.height
- const tempCtx = tempCanvas.getContext('2d')
- tempCtx.putImageData(imageData, 0, 0)
-
+ const tempCanvas = document.createElement('canvas');
+ tempCanvas.width = canvas.width;
+ tempCanvas.height = canvas.height;
+ const tempCtx = tempCanvas.getContext('2d');
+ tempCtx.putImageData(imageData, 0, 0);
// 将签名内容绘制到主画布上
- ctx.drawImage(tempCanvas, 0, 0)
-
- // 导出图片
- const signatureImage = canvas.toDataURL('image/png')
- this.$emit('confirm', signatureImage)
+ ctx.drawImage(tempCanvas, 0, 0);
+ // 导出图片为base64
+ const base64Data = canvas.toDataURL('image/png');
+ // base64转blob
+ const blob = this.dataURLtoBlob(base64Data);
+ // 新增：生成带时间戳的文件名
+ const timestamp = Date.now();
+ const fileName = `signature_${timestamp}.png`;
+ const file = new File([blob], fileName, { type: blob.type });
+ // 上传
+ customUploadRequest({
+ file,
+ onSuccess: (res) => {
+ // 假设返回的图片路径为 res.url
+ const url = res.msg || res.data || res
+ editSignPicture({signPicture:res.msg}).then(res=>{
+ if(res.code==200){
+ this.$message.success('签名成功');
+ this.$emit('confirm', url);
+ }
+ })
+ },
+ onError: (err) => {
+ this.$message && this.$message.error ? this.$message.error('上传签名失败') : alert('上传签名失败');
+ }
+ });
}
},
beforeDestroy() {
--
Gitblit v1.7.1