Your Name a473d9710c 修复GEMINI生图二次对话4K/2K问题

- 修复ImageParamsBar组件的useEffect逻辑，确保参数正确同步
- 修复chat.tsx中imageParams的初始化，确保所有字段都有值
- 解决二次对话时选择4K但生成2K的问题
- 确保从localStorage恢复的参数能正确传递给ImageParamsBar组件

问题根源：
- ImageParamsBar的useEffect只在initialParams存在时执行
- 如果initialParams是undefined，会使用默认值2K
- imageParams可能未正确传递，导致参数丢失

修复方案：
- 修改useEffect条件判断，使用!== undefined而不是truthy检查
- 确保imageParams始终有完整的默认值结构
- 添加详细的分析报告文档

2026-01-02 21:18:46 +08:00

4.8 KiB

Raw Permalink Blame History

图片编辑器变清晰功能检查报告

📋 检查范围

检查 components/image-annotator.tsx 中的图片变清晰功能，确认是否存在与聊天对话框相同的问题（即是否使用了原图而不是预览图）。

✅ 检查结果

1. 代码实现分析

handleEnhance 函数 (components/image-annotator.tsx 第522-592行)：

const handleEnhance = async () => {
  // ...
  // 使用原图URL获取原图数据，而不是canvas的预览图
  console.log("[变清晰] 使用原图URL获取数据:", originalImageUrl);
  const base64Data = await imageUrlToBase64(originalImageUrl);
  // ...
}

关键点：

✅ 使用 originalImageUrl 获取原图数据
✅ 调用 imageUrlToBase64(originalImageUrl) 转换为Base64
✅ 没有使用 canvas.toDataURL()，避免了预览图问题

2. `originalImageUrl` 的设置逻辑

初始化 (components/image-annotator.tsx 第68行)：

const [originalImageUrl, setOriginalImageUrl] = useState<string>(imageUrl);

更新 (components/image-annotator.tsx 第171-194行)：

useEffect(() => {
  setIsLoading(true);
  setOriginalImageUrl(imageUrl);  // ✅ 当 imageUrl 变化时，更新 originalImageUrl
  // ...
}, [imageUrl, initialResizeMode]);

结论：originalImageUrl 始终跟随传入的 imageUrl。

3. `ImageAnnotator` 组件的调用

image-preview.tsx 中的调用 (第505-513行, 第518-530行)：

<ImageAnnotator
  imageUrl={original}  // ✅ 传入的是原图 URL
  onConfirm={...}
  onCancel={...}
/>

original 的来源 (components/image-preview.tsx 第146行)：

const { thumbnail, original, maxWidth, is4K } = parseImageUrls();

parseImageUrls 函数 (components/image-preview.tsx 第50-144行)：

从 alt 文本中解析原图 URL（格式：thumb|||原图URL|||imageSize）
如果解析失败，尝试从文件名推断原图 URL
如果推断也失败，可能使用 src（缩略图）作为备选

⚠️ 潜在问题

问题1：`original` 可能不是真正的原图

如果 parseImageUrls 解析失败，original 可能会是缩略图 URL：

// 如果解析失败，originalUrl 可能仍然是 src（缩略图）
let originalUrl = src;  // 默认值

影响：

如果 alt 文本格式不正确，或者文件名不包含 thumb 标识
original 可能会是缩略图 URL
导致 ImageAnnotator 接收的是缩略图，而不是原图

问题2：`imageUrlToBase64` 函数

实现 (components/image-annotator.tsx 第434-456行)：

const imageUrlToBase64 = async (url: string): Promise<string> => {
  // 如果已经是data URL，直接返回
  if (url.startsWith("data:")) {
    return url.split(",")[1];
  }
  
  // 如果是HTTP URL，需要先fetch获取
  const response = await fetch(url);
  // ...
}

结论：✅ 函数实现正确，会从 URL 获取完整的图片数据。

✅ 结论

图片编辑器变清晰功能实现正确

使用原图URL：handleEnhance 函数使用 originalImageUrl 获取原图数据
没有使用预览图：没有使用 canvas.toDataURL()，避免了预览图问题
URL转换正确：imageUrlToBase64 函数会从 URL 获取完整的图片数据

与聊天对话框的实现一致

✅ 都使用原图 URL 获取数据
✅ 都调用 imageUrlToBase64 转换为Base64
✅ 都没有使用 canvas.toDataURL()

📋 建议

1. 验证 `original` 是否为真正的原图

建议在 image-preview.tsx 中添加日志，确认 original 是否为真正的原图：

const { thumbnail, original, maxWidth, is4K } = parseImageUrls();
console.log("[ImagePreview] Original URL:", original);
console.log("[ImagePreview] Thumbnail URL:", thumbnail);

2. 确保 `alt` 文本格式正确

确保生成图片时，alt 文本格式正确：

格式：thumb|||原图URL|||imageSize
例如：thumb|||https://s3.1080p.hk/jsxiangche/uploads/xxx.jpg|||2K

3. 添加验证逻辑

在 ImageAnnotator 组件中，可以添加验证逻辑，确保传入的 imageUrl 不是缩略图：

useEffect(() => {
  if (imageUrl.includes("thumb") || imageUrl.includes("thumbnail")) {
    console.warn("[ImageAnnotator] ⚠️ 警告：传入的 imageUrl 可能是缩略图！");
  }
}, [imageUrl]);

🎯 总结

图片编辑器变清晰功能实现正确，不存在与聊天对话框相同的问题。

✅ 使用原图 URL 获取数据
✅ 没有使用预览图
✅ URL 转换正确

唯一需要注意的点：确保传入 ImageAnnotator 的 imageUrl 是真正的原图 URL，而不是缩略图 URL。这取决于 parseImageUrls 函数的解析结果。

4.8 KiB Raw Permalink Blame History Unescape Escape