diff --git a/components/canvas/ObjectPickerOverlay.tsx b/components/canvas/ObjectPickerOverlay.tsx index 16441ca2e..62351a007 100644 --- a/components/canvas/ObjectPickerOverlay.tsx +++ b/components/canvas/ObjectPickerOverlay.tsx @@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button"; import { useCanvasStore, type PickedObject } from "@/store/canvas"; import { toast } from "sonner"; import { cn } from "@/lib/utils"; +import { buildImageProxyUrl } from "@/lib/image-delivery"; // 已标注的物品(本地状态,用于显示标记) interface PickedMarker { @@ -28,6 +29,7 @@ async function drawMarkerOnImage( return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'anonymous'; + const loadUrl = buildImageProxyUrl(imageUrl); img.onload = () => { // 创建 canvas @@ -108,7 +110,7 @@ async function drawMarkerOnImage( reject(new Error('图片加载失败')); }; - img.src = imageUrl; + img.src = loadUrl; }); } diff --git a/components/canvas/RealtimeCanvasDialog.tsx b/components/canvas/RealtimeCanvasDialog.tsx index 2c7cd301c..2e514e441 100644 --- a/components/canvas/RealtimeCanvasDialog.tsx +++ b/components/canvas/RealtimeCanvasDialog.tsx @@ -20,6 +20,7 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Slider } from "@/components/ui/slider"; import { cn } from "@/lib/utils"; +import { buildImageProxyUrl } from "@/lib/image-delivery"; import { Eraser, Loader2, @@ -1015,10 +1016,11 @@ export function RealtimeCanvasDialog({ const image = new Image(); image.crossOrigin = "anonymous"; + const loadUrl = buildImageProxyUrl(initialImageUrl); await new Promise((resolve, reject) => { image.onload = () => resolve(); image.onerror = () => reject(new Error("加载初始图片失败")); - image.src = initialImageUrl; + image.src = loadUrl; }); const scale = Math.min(canvas.width / image.width, canvas.height / image.height); diff --git a/components/canvas/nodes/ImageNode.tsx b/components/canvas/nodes/ImageNode.tsx index 735b668b0..ea107b31b 100644 --- a/components/canvas/nodes/ImageNode.tsx +++ b/components/canvas/nodes/ImageNode.tsx @@ -176,6 +176,7 @@ async function drawMarkerOnImage( return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'anonymous'; + const loadUrl = buildImageProxyUrl(imageUrl); img.onload = () => { const canvas = document.createElement('canvas'); @@ -244,7 +245,7 @@ async function drawMarkerOnImage( }; img.onerror = () => reject(new Error('图片加载失败')); - img.src = imageUrl; + img.src = loadUrl; }); } diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index eee22d402..d3dc22282 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -27,6 +27,7 @@ import { } from "@/components/ui/tooltip"; import { requestLongTaskResult } from "@/lib/client/long-task"; import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry"; +import { buildImageProxyUrl } from "@/lib/image-delivery"; type Tool = "pen" | "arrow" | "circle" | "text"; @@ -167,7 +168,7 @@ export function ImageAnnotator({ setIsLoading(false); toast.error("图片加载失败"); }; - img.src = imageUrl; + img.src = toCanvasLoadUrl(imageUrl); toast.success("图片上传成功"); } catch (error) { console.error("上传图片失败:", error); @@ -222,7 +223,7 @@ export function ImageAnnotator({ setIsLoading(false); toast.error("图片加载失败"); }; - img.src = imageUrl; + img.src = toCanvasLoadUrl(imageUrl); toast.success("图片上传成功"); } catch (error) { console.error("上传图片失败:", error); @@ -368,7 +369,7 @@ export function ImageAnnotator({ setIsLoading(false); toast.error("图片加载失败"); }; - img.src = imageUrl; + img.src = toCanvasLoadUrl(imageUrl); toast.success("图片上传成功"); } catch (error) { console.error("上传图片失败:", error); @@ -405,8 +406,8 @@ export function ImageAnnotator({ img.onerror = () => { setIsLoading(false); }; - img.src = imageUrl; - }, [imageUrl, initialResizeMode]); + img.src = toCanvasLoadUrl(imageUrl); + }, [imageUrl, initialResizeMode, toCanvasLoadUrl]); // 初始化 canvas - 适配弹窗大小,固定编辑器大小,图片缩小显示 useEffect(() => { @@ -1985,3 +1986,6 @@ export function ImageAnnotator({ ); } + const toCanvasLoadUrl = useCallback((url: string) => { + return buildImageProxyUrl(url); + }, []);