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", {