图片转 Unicode 四象限 ANSI：原理、实现与浏览器工具

我之前已经有一个 truecolor half-block 版本：把图片压到终端宽度后，用上半块和下半块分别保存两行像素的颜色。这个方法稳定、兼容性好，但每个字符只能表达上下两个采样点。想让图片在命令行里更细，就要把一个字符格继续拆开，改用 Unicode 的四象限块字符。

这篇文章说明新版转换器的思路。使用入口在 实用功能 页面：把图片拖进去，生成预览，下载 .ans 文件，然后在支持 24-bit truecolor 的终端里运行 cat 文件名.ans。

一、为什么不是简单地把四个像素直接塞进一个字符

ANSI 终端的一个字符格通常只能同时设置一种前景色和一种背景色。Unicode 四象限字符能决定这个字符格里哪些象限显示前景色，哪些象限显示背景色，但它不能让左上、右上、左下、右下四个象限分别拥有四种独立颜色。

所以“四象限 full color”实际面对一个约束：每个 2 x 2 像素块最多只能压缩成两组颜色。转换器要做的不是假装没有损失，而是在这个约束下找到误差最小的两色表示。

二、四象限字符怎样编码 2 x 2 像素

一个字符格被看作四个位置：左上、右上、左下、右下。每个位置要么属于前景色，要么属于背景色，因此一共有 16 种组合。常见字符包括空格、上半块、下半块、左半块、右半块、对角块和整块，例如 ▘ ▝ ▀ ▖ ▌ ▞ ▛ ▗ ▚ ▐ ▜ ▄ ▙ ▟ █。

转换器先把原图按目标终端宽度缩放到一个采样网格。假设输出宽度是 180 个终端字符，那么采样网格的宽度就是 360 个像素；每两个横向采样点和两个纵向采样点合成一个终端字符。高度会按终端字体比例自动计算，默认把一个终端字符当作高宽比约 2:1。

三、怎样选择前景色、背景色和字符

对每一个 2 x 2 像素块，转换器枚举 16 种象限遮罩。某一种遮罩会把四个像素分成两组：前景组和背景组。前景组取平均 RGB 作为前景色，背景组取平均 RGB 作为背景色，然后计算四个原始像素与两组代表色之间的平方误差。

最终选择误差最小的一组：

1. 枚举 16 种象限遮罩。
2. 根据遮罩把四个采样像素分成前景组和背景组。
3. 分别计算两组 RGB 平均值。
4. 计算四个像素的重建误差。
5. 输出误差最小的 Unicode 字符和 ANSI truecolor 前景/背景色。

这比固定使用半块字符更细，因为它同时保留了左右方向的边缘信息。代价是文件会更大，某些终端字体对四象限块的显示也可能不如半块稳定。

四、生成的 .ans 文件里是什么

.ans 文件本质上是普通 UTF-8 文本，只是里面包含 ANSI 转义序列。每个字符前会按需要写入类似 ESC[38;2;R;G;B;48;2;R;G;Bm 的控制码，分别设置前景色和背景色，然后写入一个四象限 Unicode 字符。每行结束时再用 ESC[0m 重置样式，避免背景色污染后面的命令行。

在 macOS Terminal、iTerm2、Windows Terminal、GNOME Terminal 等支持 truecolor 和 Unicode block elements 的终端中，可以直接运行：

cat image-quadrant-180x120-truecolor.ans

如果图片太宽，终端自动换行会破坏画面；这时要么把终端窗口拉宽，要么在转换时降低输出宽度。

五、为什么工具页不把图片上传到服务器

图片转换不需要服务器参与。浏览器已经能解码常见图片格式，并能通过 Canvas 读取缩放后的像素。把转换放在前端有三个好处：

• 隐私更简单：图片不离开用户设备。
• 存储压力更小：服务器不保存上传文件，也不需要定时清理原图。
• 反馈更快：拖入图片后可以直接预览、调整宽度并重新生成。

页面仍然设置了 30 分钟失效逻辑：生成的 Blob 下载链接、预览 HTML 和当前图片引用会在本页中自动释放。用户已经下载到本机的 .ans 文件不受影响。

六、实现中的几个边界

第一，浏览器只能处理它自己能解码的格式。PNG、JPEG、WebP、GIF、AVIF 和 SVG 通常没有问题，但 HEIC、损坏文件或引用外部资源的 SVG 可能失败。

第二，四象限字符并不等于四倍无损分辨率。每个字符依然只有前景和背景两种颜色；复杂纹理、噪声和高频细节会被压缩成两组代表色。

第三，终端字体会影响观感。理想字体应该让块元素紧密贴合，没有明显缝隙；如果看到格线或字符宽度不齐，需要换等宽字体或调整终端行距。

七、为什么这版比 half-block 更适合细节图

Half-block 的优势是每个字符保存上下两行颜色，色彩表达稳定；四象限版本的优势是同一个字符里可以出现左右方向的结构，因此头发、轮廓线、小面积高光和斜边会更清楚。对于动漫头像、图标和边缘明显的插画，四象限通常能在相同终端宽度下保留更多形状信息。

如果目标是最大兼容性，half-block 仍然是很好的选择；如果目标是在支持 Unicode 和 truecolor 的现代终端里尽可能精细，四象限加最小误差两色聚类更合适。

八、使用建议

• 头像或竖图可以先用 160 到 200 列宽度试一次。
• 如果终端会自动换行，就降低宽度，而不是继续提高精度。
• 透明 PNG 建议选择接近终端背景的合成色。
• 复杂照片会生成很大的 ANSI 文件，插画、图标和人物头像通常效果更好。

完整使用入口在 实用功能页面。转换器本身不依赖账号，也不需要后端保存文件；它只是把图片采样、两色近似和 ANSI 输出这三步放到了同一个浏览器界面里。