diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index e31c8f8b5..945befd4f 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -1227,8 +1227,36 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod } }; + // 上传图片到服务器获取URL的辅助函数 + const uploadImageToServer = async (dataUrl: string, filename: string): Promise => { + try { + // 将 data URL 转换为 Blob + const response = await fetch(dataUrl); + const blob = await response.blob(); + + // 创建 FormData 上传 + const formData = new FormData(); + formData.append("file", blob, filename); + + const uploadResponse = await fetch("/api/files/upload", { + method: "POST", + body: formData, + }); + + if (!uploadResponse.ok) { + throw new Error("上传失败"); + } + + const uploadResult = await uploadResponse.json(); + return uploadResult.url; + } catch (error) { + console.error("上传图片失败:", error); + throw error; + } + }; + // 确认 - const handleConfirm = () => { + const handleConfirm = async () => { // 优先使用处理后的图片(如果有) if (processedImageUrl) { // 如果有处理后的图片URL,直接使用它 @@ -1237,10 +1265,19 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod } if (processedImageBase64) { - // 如果有处理后的图片Base64,转换为data URL + // 如果有处理后的图片Base64,先上传到服务器获取URL const mimeType = processType === "rmbg" || processType === "resize" ? "image/png" : "image/jpeg"; const dataUrl = `data:${mimeType};base64,${processedImageBase64}`; - onConfirm(dataUrl); + const ext = processType === "rmbg" || processType === "resize" ? "png" : "jpg"; + const filename = `processed-${Date.now()}.${ext}`; + + try { + toast.info("正在上传图片..."); + const uploadedUrl = await uploadImageToServer(dataUrl, filename); + onConfirm(uploadedUrl); + } catch { + toast.error("上传失败,请重试"); + } return; } @@ -1263,9 +1300,17 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod drawAction(exportCtx, action, 1); } - // 导出为 data URL + // 导出为 data URL,然后上传到服务器 const dataUrl = exportCanvas.toDataURL("image/png"); - onConfirm(dataUrl); + const filename = `annotated-${Date.now()}.png`; + + try { + toast.info("正在上传图片..."); + const uploadedUrl = await uploadImageToServer(dataUrl, filename); + onConfirm(uploadedUrl); + } catch { + toast.error("上传失败,请重试"); + } }; // 弹窗内容