From 42feb0af0ae1d486d0474c76711fdb67c778bcf3 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期六, 28 六月 2025 10:04:30 +0800
Subject: [PATCH] Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory
---
culture/src/components/SignatureCanvas.vue | 106 ++++++++++++++++++++++++++++++++---------------------
1 files changed, 64 insertions(+), 42 deletions(-)
diff --git a/culture/src/components/SignatureCanvas.vue b/culture/src/components/SignatureCanvas.vue
index cb7f5ba..3f4d49f 100644
--- a/culture/src/components/SignatureCanvas.vue
+++ b/culture/src/components/SignatureCanvas.vue
@@ -1,27 +1,11 @@
<template>
- <el-dialog
- title="确认签字"
- :visible.sync="visible"
- :width="dialogWidth"
- :close-on-click-modal="false"
- custom-class="signature-dialog"
- append-to-body
- @close="$emit('update:visible', false)"
- >
+ <el-dialog title="确认签字" :visible.sync="visible" :width="dialogWidth" :close-on-click-modal="false"
+ custom-class="signature-dialog" append-to-body @close="$emit('update:visible', false)">
<div class="signature-container">
<div class="signature-content">
- <canvas
- ref="signatureCanvas"
- :width="canvasWidth"
- :height="canvasHeight"
- @mousedown="startDrawing"
- @mousemove="draw"
- @mouseup="stopDrawing"
- @mouseleave="stopDrawing"
- @touchstart="handleTouchStart"
- @touchmove="handleTouchMove"
- @touchend="stopDrawing"
- ></canvas>
+ <canvas ref="signatureCanvas" :width="canvasWidth" :height="canvasHeight" @mousedown="startDrawing"
+ @mousemove="draw" @mouseup="stopDrawing" @mouseleave="stopDrawing" @touchstart="handleTouchStart"
+ @touchmove="handleTouchMove" @touchend="stopDrawing"></canvas>
</div>
<div class="signature-footer">
<el-button type="default" @click="clearCanvas">重置</el-button>
@@ -32,6 +16,8 @@
</template>
<script>
+import { customUploadRequest, getFullUrl } from '@/utils/utils'
+import {editSignPicture} from './service'
export default {
name: 'SignatureCanvas',
props: {
@@ -91,11 +77,11 @@
this.context.lineWidth = 2
this.context.lineCap = 'round'
this.context.lineJoin = 'round'
-
+
// 清空画布并绘制虚线边框
this.clearCanvas()
},
-
+
drawDashedBorder() {
const ctx = this.context
ctx.setLineDash([5, 5])
@@ -114,16 +100,16 @@
draw(event) {
if (!this.isDrawing) return
-
+
const rect = this.$refs.signatureCanvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
-
+
this.context.beginPath()
this.context.moveTo(this.lastX, this.lastY)
this.context.lineTo(x, y)
this.context.stroke()
-
+
this.lastX = x
this.lastY = y
this.hasDrawn = true
@@ -141,17 +127,17 @@
handleTouchMove(event) {
event.preventDefault()
if (!this.isDrawing) return
-
+
const touch = event.touches[0]
const rect = this.$refs.signatureCanvas.getBoundingClientRect()
const x = touch.clientX - rect.left
const y = touch.clientY - rect.top
-
+
this.context.beginPath()
this.context.moveTo(this.lastX, this.lastY)
this.context.lineTo(x, y)
this.context.stroke()
-
+
this.lastX = x
this.lastY = y
this.hasDrawn = true
@@ -170,7 +156,7 @@
confirmSignature() {
const canvas = this.$refs.signatureCanvas
const ctx = this.context
-
+
// 校验是否签名
if (this.isCanvasBlank()) {
this.$message && this.$message.warning('请先确认签名')
@@ -178,24 +164,58 @@
}
// 保存当前画布内容
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)
-
+
// 创建一个临时画布来保存签名内容
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', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
+ // 导出图片为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('上传签名失败');
+ }
+ });
+ },
+
+ // 新增：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 });
},
// 新增方法：判断画布是否为空白
@@ -215,6 +235,7 @@
:deep(.el-dialog__body) {
padding: 0;
}
+
:deep(.el-dialog) {
margin-top: 10vh !important;
}
@@ -223,12 +244,12 @@
.signature-container {
background: #fff;
border-radius: 4px;
-
+
.signature-content {
padding: 20px;
display: flex;
justify-content: center;
-
+
canvas {
border-radius: 4px;
background: rgba(239, 248, 250, 1);
@@ -236,16 +257,17 @@
height: 100%;
}
}
-
+
.signature-footer {
padding: 20px;
border-top: 1px solid #dcdfe6;
display: flex;
justify-content: flex-end;
gap: 12px;
- button{
+
+ button {
width: 150px;
}
}
}
-</style>
\ No newline at end of file
+</style>
\ No newline at end of file
--
Gitblit v1.7.1