+
+
+
学生答案图片
+
![]()
+
+
+
参考答案
-
{{ currentQuestion.referenceAnswer }}
+
{{ currentQuestion.referenceAnswer }}
@@ -355,7 +361,7 @@ async function confirmScore() {
border-radius: 6px;
white-space: pre-wrap;
}
-.ref-image {
+.ref-image, .student-image {
max-width: 100%;
max-height: 300px;
border-radius: 6px;
diff --git a/src/components/RubricEditor.vue b/src/components/RubricEditor.vue
index d8ff8fc..173da9a 100644
--- a/src/components/RubricEditor.vue
+++ b/src/components/RubricEditor.vue
@@ -28,7 +28,7 @@
-
![]()
+
删除图片
@@ -61,6 +61,7 @@ import { ElMessage } from 'element-plus'
import { useAppStore } from '@/stores/app'
import { useGradingStore } from '@/stores/grading'
import type { QuestionItem } from '@/types'
+import { addWatermark } from '@/utils/image'
const appStore = useAppStore()
const gradingStore = useGradingStore()
@@ -142,7 +143,7 @@ async function uploadRefImage(idx: number) {
if (!window.electronAPI) return
const data = await window.electronAPI.dialog.openImage()
if (data) {
- questions.value[idx].referenceAnswerImage = `data:${data.mime};base64,${data.base64}`
+ questions.value[idx].referenceAnswerImage = `data:image/${data.mime};base64,${await addWatermark(data.base64, '参考答案')}`
}
}
diff --git a/src/utils/image.ts b/src/utils/image.ts
new file mode 100644
index 0000000..1f489d4
--- /dev/null
+++ b/src/utils/image.ts
@@ -0,0 +1,21 @@
+export function addWatermark(base64: string, text: string): Promise
{
+ return new Promise((resolve, reject) => {
+ const img = new Image()
+ img.onload = () => {
+ const canvas = document.createElement('canvas')
+ canvas.width = img.width
+ canvas.height = img.height
+ const ctx = canvas.getContext('2d')
+ if (!ctx) return reject(new Error('Canvas 2D context not available'))
+ ctx.drawImage(img, 0, 0)
+ ctx.font = `bold ${Math.max(28, Math.round(img.width / 20))}px sans-serif`
+ ctx.fillStyle = 'rgba(255, 0, 0, 0.85)'
+ ctx.textBaseline = 'top'
+ const padding = Math.max(8, Math.round(img.width / 60))
+ ctx.fillText(text, padding, padding)
+ resolve(canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, ''))
+ }
+ img.onerror = () => reject(new Error('Failed to load image for watermark'))
+ img.src = `data:image/png;base64,${base64}`
+ })
+}