Share Screenshot – Code Block Background Turns Black & Logos Missing

问题场景

用户在 LobeChat 中打开任意包含 Markdown 代码块的会话，点击 Share 打开分享弹窗，切到 Screenshot 标签页。此时弹窗内的预览渲染正常（代码块为浅色背景，logo 与头像可见），但点击 Copy 复制图片或 Download Screenshot 下载图片后，导出的结果出现两处视觉问题：代码块背景变成黑色，LobeHub logo 与 agent 助手头像显示为损坏/缺失图片。该问题在 PC 桌面应用和 Web 版本上均可稳定复现。

报错原文

Share Screenshot - Code Block Background Turns Black & Logos Missing

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 转图片时存在背景色/背景图渲染问题。PR #11168 曾尝试升级到 v2，其中包含“background color bug fixes”和“background image fixes in pseudo elements”，但该 PR 被关闭未合并。
• logo/头像缺失：外部图片（logo、agent 头像）经 CORS 代理加载失败时，在 canvas 生成过程中会静默丢图。另有 PR #13388 通过向 SPA 客户端环境传入 s3PublicDomain 来修复图片 CORS 错误，但同样尚未合并。

预览正常而导出异常的原因在于：预览直接由浏览器 DOM 正常渲染，而导出时 snapdom 会重新请求资源（受 CORS 约束）并在 canvas 序列化过程中重新计算样式，因此两者结果不一致。

环境排查

• LobeChat 版本：确认是否为 2.2.0。
• 操作系统与客户端：Windows，Web（桌面浏览器）与 PC 桌面应用是否均复现。
• 浏览器：Edge、Chrome 是否均复现。
• 截图渲染库：确认 @zumer/snapdom 版本（Issue 中为 v1.9.14）。
• CORS 代理：确认导出时使用的 CORS 代理地址是否可达、能否正常返回图片资源。
• 图片资源：确认分享图涉及的 logo、agent 头像等外部资源是否带正确的 CORS 响应头，或是否可内联为 data URI。

解决步骤

1. 确认问题场景：导出图片中代码块背景为 #000000 或接近黑色，同时 logo 与头像损坏，且预览正常，以匹配本 Issue 描述。
2. 检查当前 @zumer/snapdom 版本，是否仍为存在背景渲染问题的 v1.x。
3. 可优先尝试关注或推动升级到 @zumer/snapdom v2（对应 PR #11168 中的背景渲染修复）。
4. 可优先尝试关注或推动合并 PR #13388，通过向 SPA 客户端环境传入 s3PublicDomain 修复图片 CORS 错误。
5. 可优先尝试确认分享弹窗中所有图片资源均以正确的 CORS 响应头提供，或将其内联为 data URI，以避免导出时重新请求失败。
6. 若自行改动依赖后问题仍存在，回退改动并等待官方修复，避免引入新的渲染问题。

验证方法

再次打开包含代码块的会话，进入 Share → Screenshot，分别点击 Copy 与 Download Screenshot，检查导出图片中代码块背景是否为正常浅色，LobeHub logo 与 agent 头像是否完整显示，并与弹窗内预览保持一致。若导出结果与预览一致，则问题已解决。

参考来源

lobehub/lobe-chat #15250