From da1579d8521eb5ac1967f2842b79f0d02afa14ed Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 30 Dec 2025 18:25:15 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=9B=BE=E7=89=87=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8=E4=B8=8A=E4=BC=A0=E5=8E=9F=E5=9B=BE=E8=80=8C?= =?UTF-8?q?=E9=9D=9E=E9=A2=84=E8=A7=88=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加imageUrlToBase64函数，从原图URL获取完整原图数据 - 修复抠图、变清晰、图像拓展功能，使用原图URL而不是canvas预览图 - 确保上传给API的是原图，下载的也是原图 - 添加详细调试日志，记录原图Base64长度 --- components/image-annotator.tsx | 61 ++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 21 deletions(-) diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index dff5c92..28f2569 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -430,18 +430,41 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod setActions([]); }; + // 将图片URL转换为Base64（获取原图数据） + const imageUrlToBase64 = async (url: string): Promise => { + // 如果已经是data URL，直接返回 + if (url.startsWith("data:")) { + return url.split(",")[1]; + } + + // 如果是HTTP URL，需要先fetch获取 + const response = await fetch(url); + if (!response.ok) { + throw new Error(`获取原图失败: ${response.status} ${response.statusText}`); + } + const blob = await response.blob(); + + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onloadend = () => { + const base64String = (reader.result as string).split(",")[1]; + resolve(base64String); + }; + reader.onerror = reject; + reader.readAsDataURL(blob); + }); + }; + // 抠图功能 const handleRemoveBackground = async () => { - if (!image || !canvasRef.current) return; + if (!image) return; setIsRemovingBg(true); try { - // 获取当前画布的图片（包含标注） - const canvas = canvasRef.current; - const currentImageData = canvas.toDataURL("image/png"); - - // 提取Base64数据（去掉data:image/png;base64,前缀） - const base64Data = currentImageData.split(",")[1]; + // 使用原图URL获取原图数据，而不是canvas的预览图 + console.log("[抠图] 使用原图URL获取数据:", originalImageUrl); + const base64Data = await imageUrlToBase64(originalImageUrl); + console.log("[抠图] 原图Base64长度:", base64Data.length, "字符"); // 调用抠图API const response = await fetch("/api/rmbg", { @@ -497,16 +520,14 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod // 变清晰处理 const handleEnhance = async () => { - if (!image || !canvasRef.current) return; + if (!image) return; setIsEnhancing(true); try { - // 获取当前画布的图片（包含标注） - const canvas = canvasRef.current; - const currentImageData = canvas.toDataURL("image/png"); - - // 提取Base64数据（去掉data:image/png;base64,前缀） - const base64Data = currentImageData.split(",")[1]; + // 使用原图URL获取原图数据，而不是canvas的预览图 + console.log("[变清晰] 使用原图URL获取数据:", originalImageUrl); + const base64Data = await imageUrlToBase64(originalImageUrl); + console.log("[变清晰] 原图Base64长度:", base64Data.length, "字符"); // 调用变清晰API const response = await fetch("/api/enhance", { @@ -806,16 +827,14 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod // 图像拓展处理 const handleExtend = async () => { - if (!image || !canvasRef.current) return; + if (!image) return; setIsExtending(true); try { - // 获取当前画布的图片（包含标注） - const canvas = canvasRef.current; - const currentImageData = canvas.toDataURL("image/png"); - - // 提取Base64数据（去掉data:image/png;base64,前缀） - const base64Data = currentImageData.split(",")[1]; + // 使用原图URL获取原图数据，而不是canvas的预览图 + console.log("[图像拓展] 使用原图URL获取数据:", originalImageUrl); + const base64Data = await imageUrlToBase64(originalImageUrl); + console.log("[图像拓展] 原图Base64长度:", base64Data.length, "字符"); // 调用图像拓展API const response = await fetch("/api/extend", {