Share Screenshot – Code Block Background Turns Black & Logos Missing

快速结论：此问题通常出现在 LobeChat 使用「分享截图 / Share Screenshot」功能导出图片时，表现为导出的 PNG 中代码块背景变黑、LobeHub Logo 与 Agent 头像丢失，而应用内预览正常。优先排查截图渲染库 @zumer/snapdom 的背景渲染缺陷与外部图片资源的 CORS 加载问题。

适用环境：已确认：LobeChat v2.2.0；Windows 桌面端；Web 端（Edge、Chrome）；PC 桌面应用与网页版均复现。Issue 未提供 Python、CUDA、显卡、PyTorch 等环境信息，不适用。

最快修复方案：暂无确认的一步修复方案。Issue 中提到的候选修复（升级 @zumer/snapdom v2 的 PR #11168、CORS/S3 域名修复 PR #13388）均未合并，尚未被验证为有效。

注意事项：该问题属于上游依赖与资源加载层面，普通用户无法通过设置项绕过；在官方修复合并前，只能尝试规避手段（如改用文本分享、避免在截图中包含代码块或外部头像）。

问题场景

用户在 LobeChat（v2.2.0）中打开任意包含 Markdown 代码块的会话，点击「分享 / Share」按钮 → 选择「截图 / Screenshot」标签页。此时应用内预览显示正常（代码块为浅色背景、Logo 与头像可见）。但点击「复制 / Copy Image」或「下载截图 / Download Screenshot」后，导出的图片出现两类渲染错误：代码块背景变成 #000000 或接近黑色的背景，导致文字对比度极低难以阅读；底部 LobeHub Logo 与 Agent 助手头像（例如 “Lobe AI 纯净模式” 图标）显示为破损/缺失图片。该问题在 PC 桌面应用和 Web 版本上均稳定复现，且语法高亮的文字颜色仍然保留。

报错原文

Share Screenshot - Code Block Background Turns Black & Logos Missing

Code block backgrounds turn black, making the text extremely difficult or impossible to read
LobeHub logo and agent assistant avatar fail to render (appear as broken/missing images)

Expected: Exported image matches preview
Actual:
- Code block backgrounds are black instead of light themed
- LobeHub logo at bottom is broken (shows placeholder/missing image)
- Agent avatar (e.g., "Lobe AI 纯净模式" icon) is broken

原因分析

根据 Issue 讨论，LobeChat 使用 @zumer/snapdom v1.9.14 进行截图生成，并在位图导出时应用了 CORS 代理（https://proxy.corsfix.com/?）；分享图背景同时使用 CSS 颜色（colorBgLayout）和背景图（screenshot_background.webp）。可能的原因有两点：

代码块背景变黑：@zumer/snapdom v1.x 在 DOM 转图片时存在背景颜色/背景图渲染的已知问题。曾有针对升级到 v2 的 PR #11168（包含 background color bug fixes 与 pseudo element 背景图修复），但该 PR 已关闭未合并。
Logo / 头像缺失：Logo、Agent 头像等外部图片在通过 CORS 代理加载失败时，canvas 序列化过程中会静默损坏为占位/缺失图像。另有未合并的 PR #13388 试图通过向 SPA 客户端环境传递 s3PublicDomain 来修复图片 CORS 错误。

预览正常而导出异常，是因为预览直接由浏览器 DOM 渲染，而导出时 snapdom 会重新抓取资源（受 CORS 约束）并重新计算样式后再序列化到 canvas。

环境排查

确认 LobeChat 版本（Issue 中为 2.2.0）。
确认客户端类型：Web（桌面浏览器）或 PC 桌面应用，Issue 中两者均可复现。
确认浏览器：Edge、Chrome。
确认操作系统：Windows。
确认截图渲染依赖版本：@zumer/snapdom v1.9.14（Issue 讨论中引用的代码基线）。
确认导出时是否经过 CORS 代理（https://proxy.corsfix.com/?），以及外部图片资源是否带有正确的 CORS 响应头。
Issue 未提供 Python、CUDA、显卡、PyTorch 等信息，无需排查这些项。

解决步骤

按 Issue 复现路径确认现象：打开含代码块的会话 → Share → Screenshot 标签 → 对比预览与导出结果，确认代码块背景为黑色、Logo 与头像缺失。
确认 LobeChat 版本为 2.2.0 或存在同样依赖 @zumer/snapdom v1.x 的版本。
关注上游依赖修复：@zumer/snapdom 升级至 v2 的 PR #11168（Issue 指出其中包含背景颜色与伪元素背景图修复），该 PR 当前处于关闭未合并状态，可优先尝试在本地/分支验证此升级是否解决背景变黑。
关注 CORS/S3 修复：PR #13388 通过向 SPA 客户端环境传递 s3PublicDomain 来解决图片 CORS 错误，该 PR 尚未合并，可优先尝试验证是否修复 Logo/头像缺失。
在自有部署中检查并确保分享弹窗使用的所有图片资源（Logo、Agent 头像）由带正确 CORS 头的域名提供，或将其内联为 data URI，以绕过 canvas 跨域抓取失败。
若以上均不可行，暂时改用文本/Markdown 分享，或在截图内容中避免出现代码块与外部头像，作为规避手段。

验证方法

重新执行导出流程：打开含代码块的会话 → Share → Screenshot → 点击 Copy Image 或 Download Screenshot。检查导出图片中代码块是否恢复为浅色可读背景，且底部 LobeHub Logo 与 Agent 头像是否正常显示。与预览截图逐项比对，确认导出结果与预览一致即视为问题解决。