ASCII Art 文字

输入文字→艺术字符画

417 次访问

ASCII Art 字符画生成

示例:
输入文字(建议英文)0 字符
输出0 行
点击"生成"按钮…

用途

· 代码注释装饰:项目入口文件 / 大文件起始注释 / 启动 banner

· README banner:GitHub README 顶部用 ```text 代码块展示

· CLI 欢迎语:Node CLI / Go 程序启动时打印

· Git commit:里程碑提交注释

· 显示要求:复制后需用等宽字体(Courier / Menlo / Consolas)显示

关于本工具

了解工具定位 · 使用场景 · 对比优势

使用场景

💻

命令行 Banner 生成

后端开发者在 SSH 登录提示、服务启动日志、README 文件头部需要醒目的项目标识,但服务器没有图形界面。本工具将项目名或团队名转为等宽字符画,复制粘贴直接嵌入 .bashrc、启动脚本或 Markdown 代码块,无需安装 figlet 或依赖字体包,纯浏览器完成。

🎮

游戏直播开场画面

游戏主播在 OBS 或 Streamlabs 中添加频道名称或粉丝团口号时,希望文字有像素风或复古 CRT 效果,但不会使用 Photoshop 或 AE。输入文字后选择「块状」或「灰度」算法,截图保存为 PNG,直接作为场景过渡动画的标题卡,比默认字体更有辨识度。

📝

BBS 签名档装饰

老牌技术论坛(如 V2EX、NGA、Stage1st)的签名档只允许纯文本,无法使用图片或富媒体。用户用本工具将座右铭、设备配置或联系方式转为字符画,复制到论坛个人设置中,在每次回帖时自动展示,既遵守版规又突出个性。

🔧

嵌入式设备调试日志

嵌入式工程师在串口终端或 OLED 屏幕上调试设备时,需要输出大号状态标识(如「OK」「ERROR」「WARNING」),但标准库的 printf 只能输出小字。用本工具生成字符画后,直接硬编码到固件中的日志函数里,在 128×64 像素的屏幕上也能一眼看清错误信息。

🎨

手账/笔记标题页

手账爱好者在 Notion、GoodNotes 或纸质笔记本的章节开头,希望有一个与众不同的标题装饰,但手绘能力有限。输入章节名,选择「轮廓」或「阴影」风格,将生成的字符画截图或手抄到页面中央,比普通标题更吸引眼球,且无需额外素材库。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (patorjk.com)传统方法
数据隐私纯浏览器处理,文字不离开设备部分字体需上传至服务器生成手动绘制,完全离线
处理速度即时生成,<1秒1-3秒(含网络传输)数小时至数天(取决于字符画复杂度)
离线可用完全离线(浏览器本地运行)需联网完全离线
字体数量20+ 种字体100+ 种字体无限制(取决于个人技能)
字体预览实时预览,所见即所得需点击生成后查看需脑补或草稿
输出格式纯文本,可一键复制纯文本 / HTML / 图片下载纯文本
使用门槛零门槛,输入文字即出图零门槛,但需选择字体需掌握字符画绘制技巧

使用指南

上手步骤 · 输入输出 · 避坑提示

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
Hello_ _ _ _ | | | | ___| | | ___ | |_| |/ _ \ | |/ _ \ | _ | __/ | | (_) | |_| |_|\___|_|_|\___/典型场景:英文单词,默认字体
你好_ _ _ | \ | | ___| |_ | \| |/ _ \ __| | |\ | __/ |_ |_| \_|\___|\__|典型场景:中文词语,默认字体
ABC_ ____ ____ / \ | __ )| __ ) / _ \ | _ \| _ \ / ___ \| |_) | |_) | /_/ \_\____/|____/典型场景:纯大写字母,默认字体
a b c_ _ _ / \ | | | | / _ \ | | | | / ___ \| |__| |__ /_/ \_\_____|____边界 case:带空格的输入,空格会被渲染为空白
123_ _ _ | | | | | | | | | | | | |_| |_| |_|边界 case:纯数字,默认字体
!@#_ _ _ | | | | | | | | | | | | |_| |_| |_|边界 case:特殊符号,部分符号可能被渲染为相同形状
Hello World_ _ _ _ __ _ _ | | | | ___| | | ___ / _| | | | | | |_| |/ _ \ | |/ _ \ | |_ ___ | | | | | _ | __/ | | (_) || _| |___|| | | | |_| |_|\___|_|_|\___/ |_| \____/易错 case:含空格的长文本,注意换行效果
a_ / | | | | | |_|边界 case:单字符输入,最小单位

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 输入了中文或非 ASCII 字符

错误
你好世界
修复
Hello World

ASCII Art 工具只处理标准 ASCII 字符(0-127)。中文字符、Emoji、特殊符号会被忽略或显示为乱码,因为字符画映射表仅覆盖英文字母、数字和基础标点。

2. 输入了过长的文本导致输出超宽

错误
This is a very long sentence that will be converted into ASCII art and it will definitely exceed the typical terminal width of 80 characters.
修复
Keep it short

字符画每个字母通常占 5-8 列宽度,一个 50 字符的句子会变成 250-400 列宽,超出大多数屏幕/终端显示范围,导致自动换行破坏图形结构。

3. 混用了全角空格或制表符

错误
Hello  World
修复
Hello World

全角空格(U+3000)和制表符(\t)在字符画映射表中没有对应图案,会被渲染成空白或意外字符,破坏单词间的对齐和整体排版。

4. 输入了空字符串或纯空白

错误
   
修复
Hi

工具需要至少一个非空白 ASCII 字符来生成图案。纯空格、换行符或空输入不会产生任何输出,界面应提示「请输入至少一个字符」。

5. 期望字符画能保留原始大小写差异

错误
输入 "Test" 期望看到大写 T 和小写 e 的图案不同
修复
大多数 ASCII Art 字体不区分大小写,或大小写图案完全相同

许多经典 ASCII Art 字体(如 Standard、Big)对大小写字母使用同一套图案映射,输入 "A" 和 "a" 可能输出完全相同的字符画。

6. 把换行符当作文本内容输入

错误
Line1\nLine2
修复
在输入框中直接按回车换行

字面量 \n 不会被解析为换行,而是作为反斜杠和字母 n 两个字符处理。要生成多行字符画,应在输入框内直接按 Enter 键插入真实换行符。

7. 期望字符画在纯文本邮件中正常显示

错误
在 Outlook 或 Gmail 纯文本模式下粘贴字符画
修复
使用等宽字体(Courier New、Consolas)查看,或截图发送

字符画依赖等宽字体对齐每个字符。邮件客户端默认比例字体会打乱列对齐,导致图案完全变形。HTML 邮件需指定 <pre> 标签和等宽字体。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

字符映射:输入字符 → 灰度值 → 预定义字符集索引

变量说明

  • 输入字符 — 用户输入的文本字符
  • 灰度值 — 字符在字体中的视觉亮度(0-255)
  • 字符集 — 预定义的 ASCII 字符序列(如 @%#*+=-:.)
  • 索引 — 灰度值映射到字符集中的位置

示例

输入字符 'A',其灰度值约为 180(基于等宽字体渲染)。字符集为 '@%#*+=-:. '(共 10 个字符,灰度区间 0-255)。索引 = floor(180 / (256/10)) = floor(7.03) = 7,对应字符集第 7 位 '-'。因此 'A' 在输出中显示为 '-'。

适用范围

适用于等宽字体下的单字符灰度映射,不同字体/字号/字符集排列顺序会影响最终视觉效果,不涉及数学精确计算,仅基于视觉亮度近似映射。

原理图

输入文字(如:Hello)字符映射表每个字符对应一个像素图案(@ # * . 等)逐字转换(纯前端计算)输出艺术字符画(直接在浏览器中展示,无服务器请求)整个过程在浏览器本地完成,文字不会上传到任何服务器
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image, ImageDraw, ImageFont

# 将文字渲染为图像,再按像素亮度映射为 ASCII 字符
text = "Hello"
font_size = 20
font = ImageFont.truetype("arial.ttf", font_size)

# 计算文字尺寸
img = Image.new("L", (1, 1), 255)
draw = ImageDraw.Draw(img)
bbox = draw.textbbox((0, 0), text, font=font)
w, h = bbox[2] - bbox[0], bbox[3] - bbox[1]

# 渲染文字到灰度图
img = Image.new("L", (w, h), 255)
draw = ImageDraw.Draw(img)
draw.text((0, 0), text, font=font, fill=0)

# 亮度映射字符(从暗到亮)
chars = "@%#*+=-:. "
scale = 255 / (len(chars) - 1)

pixels = img.load()
for y in range(h):
    line = ""
    for x in range(w):
        idx = min(int(pixels[x, y] / scale), len(chars) - 1)
        line += chars[idx]
    print(line)
package main

import (
	"fmt"
	"image"
	"image/color"
	"image/png"
	"os"
	"strings"

	"golang.org/x/image/font"
	"golang.org/x/image/font/basicfont"
	"golang.org/x/image/math/fixed"
)

func main() {
	text := "Go"
	face := basicfont.Face7x13

	// 计算文字边界
	w := 0
	for _, r := range text {
		adv, ok := face.GlyphAdvance(r)
		if ok {
			w += adv.Ceil()
		}
	}
	h := face.Metrics().Ascent.Ceil() + face.Metrics().Descent.Ceil()

	// 创建灰度图
	img := image.NewGray(image.Rect(0, 0, w, h))
	drawer := font.Drawer{
		Dst:  img,
		Src:  image.NewUniform(color.White),
		Face: face,
		Dot:  fixed.P(0, face.Metrics().Ascent.Ceil()),
	}
	drawer.DrawString(text)

	// 像素 → ASCII
	chars := "@%#*+=-:. "
	scale := 255.0 / float64(len(chars)-1)

	for y := 0; y < h; y++ {
		var line strings.Builder
		for x := 0; x < w; x++ {
			gray := img.GrayAt(x, y).Y
			idx := int(float64(gray) / scale)
			if idx >= len(chars) {
				idx = len(chars) - 1
			}
			line.WriteByte(chars[idx])
		}
		fmt.Println(line.String())
	}
}
// 浏览器环境:利用 Canvas 渲染文字,读取像素亮度
function textToAscii(text, charSet = '@%#*+=-:. ') {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 测量文字尺寸
  ctx.font = '20px monospace';
  const metrics = ctx.measureText(text);
  const w = Math.ceil(metrics.width);
  const h = 30; // 固定高度
  
  canvas.width = w;
  canvas.height = h;
  
  // 白底黑字
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, w, h);
  ctx.fillStyle = 'black';
  ctx.font = '20px monospace';
  ctx.fillText(text, 0, 20);
  
  // 读取像素
  const imageData = ctx.getImageData(0, 0, w, h);
  const pixels = imageData.data;
  
  const scale = 255 / (charSet.length - 1);
  let result = '';
  
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const idx = (y * w + x) * 4;
      const gray = pixels[idx]; // R 通道(黑白图 R=G=B)
      const charIdx = Math.min(Math.floor(gray / scale), charSet.length - 1);
      result += charSet[charIdx];
    }
    result += '\n';
  }
  
  return result;
}

console.log(textToAscii('Hello'));

常见问题

8 个高频疑问

为什么我输入中文后,生成的字符画全是乱码或方块?
ASCII Art 的核心字符集是英文字母、数字和英文标点,这些字符宽度固定,才能拼出规整图案。中文字符宽度不固定且笔画复杂,直接混入会导致对齐错乱。如果输入中文,工具会先尝试按拼音首字母或 Unicode 码位映射成近似英文字母,但效果取决于字体和算法,复杂汉字(如「龘」)大概率显示为方块。建议只输入纯英文、数字或简单符号,效果最稳定。
这个工具和那些把照片转成字符画的工具有什么区别?
照片转字符画(如 ASCII Image)是把一张图片的每个像素按灰度映射成字符,输出的是「图」。本工具是「文字转字符画」——把输入的字符串本身当作图形元素,用字符拼出这个字符串的形状(类似用积木搭字母)。简单说:前者是图片→字符,后者是文字→字符组成的文字。用途也不同:前者用于艺术化照片,后者用于生成标题、签名或代码注释里的装饰文字。
生成的字符画字体大小和行距怎么调?我复制出去排版全乱了。
字符画依赖等宽字体(如 Courier New、Consolas)才能保持对齐。复制到普通文档(如 Word 默认宋体)或聊天软件(非代码模式)后,不等宽字体会拉伸字符,导致图案变形。解决方法:在目标软件里手动将字号设为相同大小,并强制使用等宽字体。本工具输出的是纯文本,不携带字体信息,所以粘贴后需自行设置。如果粘贴到 IDE 或代码编辑器(如 VS Code),默认等宽字体下通常不会乱。
输入的字数有没有限制?我试了长句子只显示了前半段。
纯浏览器端实现受限于页面渲染性能和屏幕宽度。默认限制输入字符数在 200 个以内(含空格和标点),超过时会自动截断。这是因为每个字符在生成过程中需要计算其在字符画网格中的位置,字数越多计算量越大,超过阈值会导致页面卡顿甚至崩溃。如果确实需要生成长篇字符画,可以分段输入,分别生成后手动拼接。未来版本可能提供「长文本模式」,但会牺牲实时预览速度。
为什么我换了一台电脑,同样的文字生成的效果不一样?
本工具完全在浏览器本地运行(JavaScript),不依赖服务器。效果差异通常来自两个原因:1) 浏览器字体渲染差异——不同操作系统(Win/Mac/Linux)对等宽字体的默认字号和字符间距处理不同,导致字符画整体宽高比变化;2) 浏览器版本差异——老旧浏览器对 Canvas 或 CSS Grid 的支持可能不完整。建议在 Chrome 或 Edge 最新版下使用,效果最一致。如果两台电脑都装了同一款等宽字体,显示效果会完全一样。
生成的字符画能用作网页或代码里的装饰吗?怎么复制最方便?
完全可以,且是常见用途之一。复制方法:直接全选结果文本(Ctrl+A)→ 复制(Ctrl+C),粘贴到 HTML 的 <pre> 标签内可以保留空格和换行。如果用在代码注释里,注意每行前加 // 或 # 前缀。不建议直接粘贴到 <p> 或 <div> 标签中,因为浏览器会合并多余空格导致图案变形。如果用作 GitHub 仓库的 README,可以放在代码块(```)内,渲染效果最佳。
这个工具生成的字符画,版权算谁的?我能用在商业项目里吗?
工具本身不主张对输出内容(字符画文本)的任何版权。字符画本质是由英文字母、空格和换行符组成的排列组合,属于「事实性输出」,不构成独创性表达。你可以自由用于个人项目、商业网站、商品包装、视频封面等,无需署名或授权。但如果输入的文字本身(如特定商标名称、受版权保护的诗歌)有第三方权利,使用该字符画时需自行评估。工具方不承担任何版权责任。
生成的字符画在手机上看完全对不齐,有没有办法?
移动端浏览器默认字体通常不是等宽字体(iOS 用 San Francisco,Android 用 Roboto),字符宽度不同导致图案错位。解决方法:1) 在手机浏览器内开启「桌面版网站」模式,部分浏览器会切换为等宽字体;2) 将结果粘贴到支持等宽字体的 App 内查看,如备忘录(需手动设置字体)、代码编辑器 App(如 Termux)、或 Markdown 编辑器(代码块模式);3) 如果是用于分享到社交媒体,建议截图后发图片而非纯文本。
选择 打开 +新窗口 esc关闭