fix: 修复画板再次编辑无法保存问题
This commit is contained in:
parent
3bfb7c467b
commit
369eceed6d
@ -4,6 +4,6 @@ VITE_OSS_URL = https://lxx-web-1313840333.cos.ap-chengdu.myqcloud.com
|
|||||||
VITE_CDN_URL = https://dmgcdn-1313840333.cos.ap-guangzhou.myqcloud.com
|
VITE_CDN_URL = https://dmgcdn-1313840333.cos.ap-guangzhou.myqcloud.com
|
||||||
VITE_SERVER_URL = http://127.0.0.1:9053/api/main
|
VITE_SERVER_URL = http://127.0.0.1:9053/api/main
|
||||||
# VITE_SERVER_URL = http://test.web.xuexiaole.com/api/main
|
# VITE_SERVER_URL = http://test.web.xuexiaole.com/api/main
|
||||||
VITE_XXL_VERSION=2.13.6
|
VITE_XXL_VERSION=2.13.7
|
||||||
VITE_INIT_VCONSOLE = 0
|
VITE_INIT_VCONSOLE = 0
|
||||||
VITE_TEACHER_ADMIN_URL = https://test.edu.xuexiaole.com
|
VITE_TEACHER_ADMIN_URL = https://test.edu.xuexiaole.com
|
||||||
|
|||||||
@ -37,6 +37,9 @@ async function drawBackground(src: string, taskId = paintTaskId) {
|
|||||||
|
|
||||||
const draw = async (imgSrc: string) => {
|
const draw = async (imgSrc: string) => {
|
||||||
const img = new Image()
|
const img = new Image()
|
||||||
|
if (/^https?:\/\//i.test(imgSrc)) {
|
||||||
|
img.crossOrigin = 'anonymous'
|
||||||
|
}
|
||||||
img.src = imgSrc
|
img.src = imgSrc
|
||||||
await new Promise<void>((resolve, reject) => {
|
await new Promise<void>((resolve, reject) => {
|
||||||
img.onload = () => resolve()
|
img.onload = () => resolve()
|
||||||
@ -114,15 +117,25 @@ function handleSaveAsync(): Promise<{ blob: Blob | null; data: string | null }>
|
|||||||
const canvas = canvasRef.value as HTMLCanvasElement
|
const canvas = canvasRef.value as HTMLCanvasElement
|
||||||
const pointData = JSON.stringify(signaturePad.toData())
|
const pointData = JSON.stringify(signaturePad.toData())
|
||||||
const resolveWithFallback = (blob: Blob | null) => {
|
const resolveWithFallback = (blob: Blob | null) => {
|
||||||
resolve({
|
try {
|
||||||
blob: blob || dataUrlToBlob(canvas.toDataURL('image/jpeg', 0.85)),
|
resolve({
|
||||||
data: pointData,
|
blob: blob || dataUrlToBlob(canvas.toDataURL('image/jpeg', 0.85)),
|
||||||
})
|
data: pointData,
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('canvas export error', error)
|
||||||
|
resolve({ blob: null, data: pointData })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (typeof canvas.toBlob === 'function') {
|
try {
|
||||||
canvas.toBlob(resolveWithFallback, 'image/jpeg', 0.85)
|
if (typeof canvas.toBlob === 'function') {
|
||||||
} else {
|
canvas.toBlob(resolveWithFallback, 'image/jpeg', 0.85)
|
||||||
resolveWithFallback(null)
|
} else {
|
||||||
|
resolveWithFallback(null)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('canvas export error', error)
|
||||||
|
resolve({ blob: null, data: pointData })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -59,7 +59,7 @@ async function save() {
|
|||||||
const { blob, data } = await signaturePadRef.value.handleSaveAsync()
|
const { blob, data } = await signaturePadRef.value.handleSaveAsync()
|
||||||
|
|
||||||
if (!blob) {
|
if (!blob) {
|
||||||
return XMessage.error('内容为空,无法保存')
|
return XMessage.error(data ? '画板图片导出失败,请重试' : '内容为空,无法保存')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof props.uploadFile !== 'function') {
|
if (typeof props.uploadFile !== 'function') {
|
||||||
@ -192,13 +192,12 @@ watch(showCanvas, async (nv: boolean) => {
|
|||||||
pen()
|
pen()
|
||||||
const bg = viewPic.value
|
const bg = viewPic.value
|
||||||
const data = props.isAndroid ? '' : props.submitAnswerPicOriginal || ''
|
const data = props.isAndroid ? '' : props.submitAnswerPicOriginal || ''
|
||||||
if (bg) {
|
if (data) {
|
||||||
|
signaturePadRef.value?.handleLoad?.(data)
|
||||||
|
} else if (bg) {
|
||||||
await signaturePadRef.value?.setBackgroundImage?.(bg)
|
await signaturePadRef.value?.setBackgroundImage?.(bg)
|
||||||
}
|
}
|
||||||
if (!showCanvas.value || currentSessionId !== canvasSessionId) return
|
if (!showCanvas.value || currentSessionId !== canvasSessionId) return
|
||||||
if (data) {
|
|
||||||
signaturePadRef.value?.handleLoad?.(data)
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user