diff --git a/components/image-annotator.tsx b/components/image-annotator.tsx index 7c4507377..7c6813296 100644 --- a/components/image-annotator.tsx +++ b/components/image-annotator.tsx @@ -27,6 +27,7 @@ interface ImageAnnotatorProps { imageUrl: string; onConfirm: (annotatedImageUrl: string) => void; onCancel: () => void; + initialResizeMode?: boolean; // 是否直接进入尺寸调整模式 } const COLORS = [ @@ -43,7 +44,7 @@ const COLORS = [ const LINE_WIDTHS = [2, 4, 6, 8]; -export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotatorProps) { +export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMode = false }: ImageAnnotatorProps) { const canvasRef = useRef(null); const containerRef = useRef(null); const [ctx, setCtx] = useState(null); @@ -158,12 +159,19 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel }: ImageAnnotator img.onload = () => { setImage(img); setIsLoading(false); + // 如果指定了初始进入尺寸调整模式,自动进入 + if (initialResizeMode && img) { + setIsResizeMode(true); + setResizeCanvasWidth(img.width); + setResizeCanvasHeight(img.height); + setSelectedAspectRatio(null); + } }; img.onerror = () => { setIsLoading(false); }; img.src = imageUrl; - }, [imageUrl]); + }, [imageUrl, initialResizeMode]); // 初始化 canvas - 适配弹窗大小,固定编辑器大小,图片缩小显示 useEffect(() => { diff --git a/components/image-preview.tsx b/components/image-preview.tsx index 3e2ac7a2d..84df4f442 100644 --- a/components/image-preview.tsx +++ b/components/image-preview.tsx @@ -1,7 +1,7 @@ "use client"; import React, { useState } from "react"; -import { X, Download, Edit, Target, Paintbrush, Sparkles, Scissors, Expand } from "lucide-react"; +import { X, Download, Edit, Target, Paintbrush, Sparkles, Scissors, Expand, Maximize2 } from "lucide-react"; import { toast } from "sonner"; import { ImageAnnotator } from "./image-annotator"; @@ -40,6 +40,7 @@ export function ImagePreview({ const [isAnnotationMode, setIsAnnotationMode] = useState(false); const [isDetecting, setIsDetecting] = useState(false); const [showAnnotator, setShowAnnotator] = useState(false); + const [showResizeEditor, setShowResizeEditor] = useState(false); // 解析 alt 文本,提取原图 URL 和宽度 // 格式优先级: @@ -284,6 +285,19 @@ export function ImagePreview({ 图像拓展 )} + )} @@ -498,6 +512,23 @@ export function ImagePreview({ onCancel={() => setShowAnnotator(false)} /> )} + + {/* 尺寸调整编辑器 */} + {showResizeEditor && ( + { + // 尺寸调整完成后,将图片添加到聊天 + if (onDrawingComplete) { + onDrawingComplete(resizedImageUrl); + toast.success("尺寸调整图片已添加到聊天"); + } + setShowResizeEditor(false); + }} + onCancel={() => setShowResizeEditor(false)} + /> + )} ); }