文字 → 图片转换器，免费

为什么你需要将文本转换为图像

文本和图像在互联网上传播的方式非常不同。文本会被每个接触它的平台重新格式化,字体改变,换行改变,缩进崩溃,特殊字符被破坏。图像是原子性的:每个像素都能保存。所以每当格式重要时,将文本转换为图像是确保你写的就是人们看到的最简单方法。常见场景:在 Twitter/X 上分享的代码片段(它从文本帖子中删除缩进和换行,但乐意渲染图像);Instagram 的引用图形(Instagram 标题不允许任何字体格式,每个美学排版帖子都是文本图像);论坛签名和横幅在 phpBB 或 Discourse 上,上传的图像可以存活,但 BBCode 中的奇特排版不能;无 UI 的截图当你想分享一段文本就像你截图了但没有周围的浏览器框架;自定义按钮图像用于老式网站或 HTML 邮件,其中网络字体许可是个问题;WhatsApp Status 和 Snapchat 覆盖层样式化的图像文本比平台自己的标题工具读起来更好;电子邮件签名用于剥离富格式的客户端(较旧的 Outlook 版本臭名昭著,基于图像的签名是解决办法)。共同主线:当你不能信任目标按你想要的方式渲染文本时,先自己将其渲染为图像。

Canvas API 如何渲染文本

HTML <canvas> 元素公开了一个 2D 渲染上下文,它通过三个核心方法处理文本。ctx.font 接受与 CSS 相同的简写("bold 32px Helvetica, Arial, sans-serif"),字体粗细、字体大小和字体族都在一个字符串中。ctx.fillStyle 设置颜色(任何 CSS 颜色值:hex、rgb、hsl、命名)。ctx.fillText(text, x, y) 使用当前字体和填充在给定位置渲染文本。两个支持方法很重要:ctx.measureText(text) 返回一个 TextMetrics 对象,其中包含渲染的 width 和(在现代浏览器中)actualBoundingBoxAscent 和 actualBoundingBoxDescent 用于垂直边界框计算;ctx.textAlign 控制相对于 x 坐标的水平对齐(left、right、center、start、end);ctx.textBaseline 控制相对于 y 坐标的垂直对齐(top、middle、alphabetic、hanging、ideographic)。默认的 alphabetic 基线将 y 坐标放在小写字母的基线上,这是排版惯例但对布局来说违反直觉,大多数渲染代码切换到 top 以获得可预测的 y 定位。多行文本不会自动换行:fillText 在单一位置渲染一行。在循环中使用 measureText 进行逐字手动换行是标准模式。

为什么只有七种字体

这里的七种字体选择,Arial、Helvetica、Georgia、Times New Roman、Courier New、Verdana、Impact,是基本上每个 Windows、macOS 和大多数 Linux 桌面安装默认附带的规范「web-safe 字体」。该列表源于 Microsoft 的 Core Fonts for the Web 项目(1996-2002),该项目将 Impact、Verdana、Georgia、Trebuchet MS 等作为免费 TrueType 下载分发,以种植跨平台一致性。只选择系统字体意味着无论哪个设备生成,渲染的图像看起来都是一样的;使用 Google Font 需要先通过 document.fonts.ready Promise 加载字体文件,然后才能进行任何 Canvas 文本渲染,这是一条可行但更重的路径。对于其特定工作是「花哨排版」的工具,加载自定义字体是必不可少的。对于快速实用的文本-到-图像生成器,七个 web-safe 选择基本上涵盖了每个常见的排版寄存器:Arial / Helvetica(中性无衬线,主力),Verdana(为屏幕阅读设计的大 x 高度无衬线),Georgia / Times New Roman(衬线用于优雅 / 正式),Courier New(等宽用于类代码内容),Impact(memes 规范的压缩粗体显示面)。对于故意古怪或品牌的排版,使用加载自定义字体的专用工具。

高-DPI / Retina 锐度

一个简单的 Canvas 实现在高密度显示器上产生模糊的输出。现代手机、平板和「Retina」笔记本电脑的 window.devicePixelRatio 为 2(有时为 3),意味着每个 CSS 像素映射到 2(或 3)个物理像素。在其 CSS 维度上渲染的 Canvas 每个 CSS 像素只有 1 像素的细节,显示时被拉伸 2x,产生可见的柔和。修复方法是将 Canvas 的后备存储维度(canvas.width 和 canvas.height)设置为 CSS 维度乘以 devicePixelRatio,然后使用 CSS 将显示的大小锁定为原始 CSS 维度,然后调用 ctx.scale(devicePixelRatio, devicePixelRatio),以便所有后续绘图操作使用原始 CSS 坐标系。此工具自动应用高-DPI 修复,下载的 PNG 在视网膜分辨率下锐利,并在典型文档大小下干净地打印。

代码片段作为图像,改用 Carbon

对于将代码片段作为图像分享,「文本-到-图像」最常见的用例,有专用工具处理语法高亮、语言检测、主题预设和窗口铬装饰,远比通用文本-到-图像生成器能做的好。Carbon(Dawn Labs,2017 年推出,carbon.now.sh)是规范选项:粘贴代码,选择语言和主题,将渲染输出拖入 Twitter/Slack/博客文章。Ray.so(Raycast,2022 年推出)是现代 Carbon 竞争者,具有略干净的默认美学和更好的深色主题处理。Codeimg.io、Chalk.ist、Snappify 和 CodeSnap 在同一利基中竞争,各种差异化(模板、多窗口布局、品牌背景)。对于普通散文、标题、引用和签名,此生成器是正确的形状;对于代码,使用 Carbon。

文本图像的 PNG vs JPEG vs WebP

对于主要包含文本的图像(这就是此工具产生的),PNG 几乎总是正确的格式。文本具有硬边和大面积的平坦颜色,正是 JPEG 处理最糟糕的。JPEG 的离散余弦变换用振铃伪影(「蚊噪声」)涂抹尖锐的边缘,这在字母周围看起来特别糟糕。PNG 的无损 DEFLATE 压缩有效处理平坦颜色区域,并在任何缩放级别保持文本清晰。PNG 还支持透明度,在以后将文本叠加在现有图像上很有用。JPEG 只对具有摄影背景的文本图像有意义(例如,在风景照片上的引用),其中摄影内容主导文件大小。WebP(无损模式)以通常小 26% 的文件大小提供与 PNG 相当的质量,并在 2026 年的 97% 浏览器中得到支持。此工具导出 PNG 以获得最大兼容性,在任何应用中放下而不必担心格式支持。

无障碍注释:文本-作-图像失去可搜索性

每当你将文本转换为图像时,你失去三件事:屏幕阅读器无障碍(使用辅助技术的视障用户在没有 OCR 的情况下无法阅读图像内的文本)、可搜索性(搜索引擎和文本搜索工具索引周围的标题或替代文本但不索引图像内容本身),以及复制粘贴(用户无法从 PNG 中选择和复制文本)。对于图像-作-文本的权衡是有意的社交帖子来说,这没问题。对于任何需要可发现、可索引或可访问的内容,优先使用 CSS 样式化的真正 HTML 文本,并将图像-的-文本方法保留给平台强迫你出手的情况。WCAG 指南建议为任何文本-作-图像提供有意义的替代文本,至少将可见文本转录到 alt 属性中,以便屏幕阅读器可以宣布它。

隐私:为什么仅浏览器在这里重要

你转换为图像的文本正是隐私重要的内容类型:社交帖子的草稿、内部备忘录、机密文档的文本截图、未发表作品的引用。服务器端文本-到-图像生成器将你的文本上传到远程服务器,在那里它停留在日志中。此工具通过 Canvas API 完全在你的浏览器中运行,在生成时在 DevTools 的 Network 标签中验证,或在页面加载后将其离线(飞行模式),工具仍然工作。对机密草稿、NDA 客户副本、内部通信或你不希望被复制到陌生人硬盘上的任何文本都安全。

常见问题