代码转图片

步 1 / 2

主题

标题

字体大小

内边距

背景文本强调色

显示窗口标题栏

显示行号

粘贴一段代码，选择四个内置主题之一，调整颜色、字号、内边距、可选标题栏和行号，然后下载由浏览器 canvas 绘制的 PNG。这个工具绘制的是纯文本，适合制作干净的代码图片，但不会解析编程语言，也不会添加语法高亮。

如何生成代码 PNG

1

粘贴代码片段

代码框可用于 JavaScript、HTML、CSS、JSON、shell 命令或任何其他纯文本。渲染器最多绘制前 400 行。
2

设置外观

选择深色、浅色、Dracula 或 Solarized，然后调整标题、字号、内边距、背景、文字和强调色。
3

检查 canvas 预览

浏览器会把每一行绘制为 canvas 文本，可选择显示窗口标题栏和行号。长行可能会把 canvas 扩展到内置最大宽度。
4

下载 PNG

将当前 canvas 导出为 PNG 图片，用于文档、笔记、幻灯片或帖子。不支持 SVG、JPEG 或 HTML 导出。

渲染器会做什么

控件	可调整内容	说明
主题	深色、浅色、Dracula、Solarized	每个主题会设置背景、文字和强调色的初始值。
文本样式	标题、字号、内边距	字号限制在 10–40 px，内边距限制在 20–200 px。
颜色	背景、文字、强调色	强调色用于行号。
标题栏	打开或关闭窗口风格标题栏	启用后，标题会显示在标题栏中。
行号	显示或隐藏	行号会作为普通 canvas 文本绘制。
导出	下载 PNG	下载按钮会把当前 canvas 保存为 PNG 图片。

实际限制

浏览器使用 Canvas API 将代码片段绘制为纯文本。它不会识别 JavaScript、Python、HTML 或其他语言。
预览只使用前 400 行，避免超大文件让页面卡住。
canvas 宽度保持在 420 px 到 2200 px 之间。特别长的行可能达到最大宽度。
两步版会在你从编辑进入下载时，把当前浏览器标签页中的输入保存在 sessionStorage。

无障碍提示

图片里的代码无法搜索、复制，也无法被屏幕阅读器读取。发布文档、教程或错误报告时，可以把 PNG 作为视觉辅助，同时在旁边保留可选择的真实代码文本。

常见问题

不会。它会把你粘贴的文字原样绘制到 canvas 上。你可以修改颜色和主题，但没有语言选择器，也没有语法解析器。

菜单包含深色、浅色、Dracula 和 Solarized。选择主题后，仍然可以覆盖背景、文字和强调色。

不可以。输出是从 canvas 创建的 PNG 下载。不提供 SVG、JPEG 或复制为 HTML。

预览只绘制前 400 行，以保持浏览器响应流畅。用于发布的图片通常更适合保留能说明核心想法的几行。

相关工具