ASCII 艺术生成器

ASCII 艺术把图片变成纯文本：每片区域的亮度对应一个字符，于是一张照片就能贴进终端、README 或源码注释。这个生成器完全在浏览器里转换 JPG、PNG、GIF 和 WebP 文件，不上传任何内容，改动设置时转换会即时重跑。

转换原理

图片首先被绘制到 canvas 上，如果宽度超过 800 像素就等比缩小。然后生成器把画布划分成网格。设列数为 cols，每个单元格的宽度为 imageWidth / cols，而每个单元格的高度是宽度的两倍，以补偿等宽字符的形状。行数为 floor(imageHeight / cellHeight)。

对每个单元格，读取一个像素并用 Rec. 601 亮度公式折算成单一亮度值：brightness = 0.299 × R + 0.587 × G + 0.114 × B。这个 0 到 255 的值会按 index = round(brightness / 255 × (charsetLength − 1)) 映射到所选字符阶梯上，并追加对应索引的字符。勾选反色时，亮度会先被替换为 255 − brightness。

单独再做一次灰度化不会改变结果，因为亮度权重本来就已经把三个颜色通道压缩成一个数字。权重本身很关键：蓝色贡献很小（0.114），绿色贡献最大（0.587），所以饱和的蓝色和饱和的黄色即使被朴素的 RGB 平均判定为同样亮，也可能映射到不同字符。这也是为什么彩色 logo 中的绿色区域通常能保持辨识度，而红色和蓝色区域有时会混在一起。

选择字符集

字符集	阶梯	长度	最适合
标准	@%#*+=-:.	10	小尺寸输出、logo、清晰线稿
详细	$@B%8&WM#… .	约 70	照片和平滑渐变
方块	█▇▆▅▄▃▂▁	9	实体、海报般的质感

每个阶梯都从暗到亮排列，所以索引 0 是最密集的字符，最后一个索引是最亮的。阶梯越长，相邻字符之间的亮度跳跃越小，这正是详细模式比标准模式更能处理渐变的缘故。

操作步骤

1. 把图片拖到上传区，或点击它浏览文件。支持 JPG、PNG、GIF 和 WebP。
2. 用滑块设置列数，范围 40 到 200，默认 80。
3. 选择标准、详细或方块。
4. 如果希望暗部变成亮字符，勾选反色。
5. 用复制按钮复制结果，粘贴到使用等宽字体的地方。

实操示例：一次一个像素

假设某个单元格取样到的像素是中等灰，R = 128, G = 128, B = 128。亮度值为 0.299×128 + 0.587×128 + 0.114×128 = 128。用 10 个字符的标准阶梯，索引是 round(128 / 255 × 9) = round(4.52) = 5，对应字符 =。黑色单元格（亮度 0）映射到索引 0，即 @；白色单元格（255）映射到索引 9，即空格。用方块阶梯，同样的中灰映射到索引 round(128 / 255 × 8) = 4，即 ▄。

对一张 400×400 的图片、80 列，每个单元格宽 5 像素、高 10 像素，所以行数为 floor(400 / 10) = 40。输出就是宽 80 字符、高 40 行的一块文本。

调整宽度与反色

列数越多，细节越多，文本块也越大；列数越少，结果越大胆抽象，适合狭窄版式。由于工具对每格只取样一个像素，小图上用过高的列数，开始出现的是锯齿而不是新细节。只要作品要放在浅色背景上，反色就很有用；当浅色主体落在深色背景上、结果变成一大块空白矩形时，它也是最快的补救办法。

两条经验法则：先从 80 列开始判断构图，做横幅或行内注释时降到 40–60，只有源图干净且对比度高时才加到 120–160。反色两次会回到原来的映射，所以可以放心地来回切换对比。如果复制按钮提示成功却什么都没粘出来，可能是浏览器拦截了剪贴板访问；手动选中预览文本，再从那里复制即可。

局限与边界情况

• 输出是单色的，没有彩色模式。
• 没有亮度、对比度或裁剪控件——需要调整请先在别处处理图片。
• 每格只取样一个像素，可能丢掉一像素细线这类细小特征，所以线稿有时适合先轻微模糊或降低列数。
• 纹理繁杂的照片会变成视觉噪声；简洁、高对比度的主体转换效果最好。
• 复制使用剪贴板 API，浏览器拦截时会退回到文本选中。
• 结果是文本，在手机上缩放表现很差，换行会破坏比例；请把它放进可横向滚动的区块里。

相关工具

• 图片压缩
• 图片转 Base64
• ASCII 码表