CodeShot：带有 3D 效果的代码截图

CodeShot：打造精美代码截图的网页工具

CodeShot 是一个开源的网络服务，能将代码和文字渲染成视觉冲击力强的图像，并提供高级的变换控制功能。它完全在你的浏览器中运行，利用 Canvas API 并将设置保存在 localStorage 中。借助 LLM（Claude）的帮助，它克服了 Carbon 或付费替代品等工具的诸多局限。

该工具支持语法高亮的代码和纯文本。核心功能包括 3D 效果（倾斜、旋转、透视）、自定义模糊、滤镜、阴影以及可单独设置颜色的选择性高亮。

核心自定义功能

工具提供对视觉元素的精细控制。完整功能列表如下：

• 内容支持：代码（带语法主题）或纯文本（标准字体）。
• 排版：字体大小、行高、文本对齐方式。
• 窗口与内边距：类窗口样式框架、内边距、圆角、行号。
• 背景与透明度：渐变色、纯色背景、窗口透明度。
• 变换效果：旋转、3D 倾斜（垂直/水平方向）、透视（边缘压缩）。
• 特效：方向性模糊（强度可调）、阴影、光源模拟。
• 滤镜：类似 Instagram 的风格滤镜（暖色调、冷色调等），强度可调节。
• 高亮：为选定文本区域设置独立颜色和透明度。
• 导出：直接从浏览器下载 PNG 或 SVG 格式文件。

所有修改均通过 localStorage 持久化，实现快速无缝的迭代体验。

技术实现细节

基于原生 JavaScript + Canvas2D 构建。初始渲染器（约 1,000 行代码）由 LLM 生成，随后在 VS Code 中借助 Copilot 支持手动优化。

解决的关键挑战包括：

• 3D 透视效果：自定义投影矩阵实现倾斜与边缘缩放。
• 语法高亮：受 Prism.js 启发的高亮器，支持多种主题。
• 滤镜系统：通过像素级操作模拟 CSS filter()，使用卷积算法实现模糊效果。
• 性能优化：预览使用离屏 Canvas，配合尺寸调整节流机制。

代码未优先考虑可读性——功能优先。公开仓库欢迎各类贡献。

示例效果：左上角 40° 倾斜，30° 深度感，暖色调滤镜 + 右侧渐隐。输出在文本渲染精度上超越 DALL-E 和 Stable Diffusion。

与其他工具对比

| 工具 | 3D 倾斜 | 自定义模糊 | 滤镜 | 高亮颜色 | 免费 |

|------|--------|------------|--------|----------|------|

| Carbon | 否 | 否 | 基础 | 否 | 是 |

| Ray.so | 否 | 否 | 是 | 否 | 付费 |

| CodeShot | 是 | 是 | 是 | 是 | 是 |

CodeShot 在无需订阅的前提下，提供了最强的自定义能力。缺点是仅客户端运行——不支持服务器端渲染。

对资深开发者而言：底层原理涉及矩阵变换（仿射 + 透视）、通过 canvas 合成实现片段着色器。在中端显卡上可流畅支持 4K 分辨率。

为何值得关注

• 完全前端处理：无后端依赖，即时预览。
• 高级 3D 几何：无需 WebGL 即可实现倾斜与透视效果。
• 设置持久化 + 可分享链接（通过查询参数传递配置）。
• 开源开放：GitHub 仓库支持 Fork 与持续改进。
• LLM 辅助开发：Claude 仅用 3 次迭代便生成约 80% 的核心代码。

— Editorial Team