图片转 ASCII 字符画：从像素到字符的映射实践

在线体验 → 𝓐𝓢𝓒𝓘𝓘 — ASCII Hermes

效果预览#

把一张蓝白线稿风格的插画，转换成彩色 ASCII 字符画，加上 3D 光球和鼠标倾斜交互：

紫色调的 ASCII 字符，保留原图的明暗层次
CSS 发光光球（pulse + 光晕 + 光线）
鼠标移动驱动 CSS 3D 透视倾斜
空闲时自动缓慢呼吸旋转

核心思路#

图片转 ASCII 的本质是亮度→字符映射：

1
亮像素 → 密集字符 (@, #, 8, G)
2
暗像素 → 稀疏字符 (., ,, :, ;)
3
透明区域 → 空格

每一个像素被映射成一个字符，字符的密度模拟了原图的灰度层次。

第一步：Python 图片预处理#

用 Pillow 读取原图，缩放到目标字符宽度，然后逐像素映射：

1
from PIL import Image
2

3
img = Image.open('source.webp').convert('RGBA')
4
TARGET_W = 150  # 字符宽度
5
# 按字符宽高比计算行数（字符单元格约为 7.5px × 10px）
6
TARGET_H = int(TARGET_W * (img.height / img.width) / 0.75)
7

8
img_small = img.resize((TARGET_W, TARGET_H), Image.LANCZOS)
9
px = img_small.load()
10

11
# 字符集：从暗到亮
12
chars = ' .,:;+*tfLCG08@'
13

14
rows = []
15
for y in range(TARGET_H):
16
    row = []
17
    for x in range(TARGET_W):
18
        r, g, b, a = px[x, y]
19
        if a < 30:  # 透明区域
20
            row.append(None)
21
            continue
22
        # 亮度计算（标准灰度公式）
23
        brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255
24
        idx = int(brightness * (len(chars) - 1))
25
        c = chars[idx]
26
        # 颜色偏移（这里用紫色调）
27
        pr = min(255, int(r * 0.6 + 150))
28
        pg = min(255, int(g * 0.4 + 80))
29
        pb = min(255, int(b * 0.3 + 180))
30
        row.append({'c': c, 'color': f'#{pr:02x}{pg:02x}{pb:02x}'})
31
    rows.append(row)

关键参数#

参数	作用	推荐值
`TARGET_W`	字符宽度，越大越细腻	100-150
字符集	亮度映射的阶梯	`' .,:;+*tfLCG08@'`
`a < 30`	透明度阈值	30
颜色偏移公式	改变输出色调	按需调整 RGB 系数

字符宽高比#

浏览器中 font-size: 10px; letter-spacing: 1.5px 时，每个字符单元格约为 7.5px × 10px（宽高比 0.75）。计算行数时必须除以这个比例，否则图像会被纵向拉伸：

1
TARGET_H = int(TARGET_W * (img_h / img_w) / 0.75)

第二步：前端渲染#

Python 输出的是一个 JSON 数组，每个元素是一行，每行是 [color, chars] 片段：

1
[
2
  [null, "      "],
3
  ["#c8a2ff", ".,::"],
4
  ["#e0d0ff", "@@88"]
5
]

前端用 <pre> + <span> 渲染：

1
var html = "";
2
data.rows.forEach(function(row) {
3
  row.forEach(function(seg) {
4
    if (seg[0] === null) {
5
      html += seg[1];  // 空格 = 背景
6
    } else {
7
      html += '<span style="color:' + seg[0] + '">' + seg[1] + '</span>';
8
    }
9
  });
10
  html += "\n";
11
});
12
document.getElementById("ascii").innerHTML = html;

第三步：CSS 3D 倾斜#

用 perspective + rotateX/Y 让整块 ASCII 字符画随鼠标倾斜：

1
document.addEventListener('mousemove', function(e) {
2
  var cx = innerWidth / 2, cy = innerHeight / 2;
3
  var ty = ((e.clientX - cx) / cx) * 10;  // 水平 ±10°
4
  var tx = ((e.clientY - cy) / cy) * -6;  // 垂直 ±6°
5
});
6

7
// 每帧平滑插值
8
function animate() {
9
  requestAnimationFrame(animate);
10
  rx += (tx - rx) * 0.05;  // 缓动系数
11
  ry += (ty - ry) * 0.05;
12
  wrap.style.transform = "rotateX(" + rx + "deg) rotateY(" + ry + "deg)";
13
}

空闲 3 秒后切换到自动呼吸模式（缓慢正弦摆动）。

第四步：CSS 光球#

纯 CSS 实现发光球体，不需要 Canvas 或 WebGL：

1
#orb-core {
2
  width: 360px; height: 360px; border-radius: 50%;
3
  background: radial-gradient(circle,
4
    #fff 0%, #d8d0ff 35%,
5
    rgba(200,190,255,0.5) 50%, transparent 80%
6
  );
7
  box-shadow: 0 0 60px rgba(255,255,255,0.7),
8
              0 0 120px rgba(240,230,255,0.4);
9
  animation: orbPulse 2.5s ease-in-out infinite;
10
}

三层结构：核心（白→紫渐变）+ 内层光晕 + 外层光晕，各自有不同频率的 scale 动画，叠加出呼吸感。

完整代码#

完整项目代码见 GitHub 仓库，或直接体验 𝓐𝓢𝓒𝓘Ⓘ 在线版。

音乐

音乐