mcpField
A
ascii-pixel-art

ascii-pixel-art

github.com/ckorhonen创意与媒体2442 次安装5 周前更新
代码仓库

关于 ascii-pixel-art

ascii-pixel-art 是将图片转换为带动画和交互效果的 ASCII 艺术 HTML 的技能，适合制作人像、物体主题的网页视觉作品。它结合主体检测、模糊像素背景与画布动画，输出可独立打开的 HTML 文件。

主要功能

  1. 01从图片检测主体并转换为字符网格
  2. 02生成模糊且像素化的背景
  3. 03添加脉冲、扫光与随机闪烁
  4. 04支持悬停涟漪与字符散射
  5. 05输出内嵌资源的 HTML 文件

适用场景

  1. 01将人像制作成动态 ASCII 网页作品
  2. 02为产品图片创建复古风格视觉效果
  3. 03把照片转换为可交互的 HTML 展示
  4. 04制作用于社交媒体的动画图像

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/ckorhonen/claude-skills --skill ascii-pixel-art

安装后在 Claude Code 中输入/ascii-pixel-art确认已加载。

附带文件scripts/ascii_pixel_effect.pyscripts/test_logic.py

详细介绍

ASCII 像素艺术生成器

从图像生成动态 ASCII 艺术，具备主体检测、模糊像素化背景和动态视觉效果。

描述

将图像转换为带有精妙视觉效果的交互式 ASCII 艺术。使用计算机视觉检测主体，营造氛围感背景，并添加脉冲效果、对角线扫光、随机闪烁和交互式悬停响应等电影级动画。

适用场景

✅ 适用于：

  • 为照片或肖像创建艺术化可视化效果
  • 生成复古／赛博朋克风格内容
  • 构建交互式网页艺术作品
  • 将图像转换为动态 HTML 显示效果
  • 创建独特的社交媒体内容
  • 演示创意编程技巧

❌ 不适用于：

  • 简单的文本 ASCII 艺术即可满足需求
  • 对性能要求严格（处理开销较大）
  • 无障碍性至关重要（依赖视觉效果）
  • 源图像没有清晰的主体（对肖像／物体效果最佳）
  • 输出需要为静态内容（此工具会生成动态 HTML）

前提条件

所需软件包：

pip install pillow rembg numpy

系统要求：

  • Python 3.7+
  • 图像处理约需 500MB RAM
  • rembg 模型会自动下载（约 180MB）

用法

基本命令
python3 scripts/ascii_pixel_effect.py <input_image> [output.html]
示例
# Generate with default output name
python3 scripts/ascii_pixel_effect.py portrait.jpg

# Specify output file
python3 scripts/ascii_pixel_effect.py photo.png artwork.html

# Process multiple images
for img in *.jpg; do
  python3 scripts/ascii_pixel_effect.py "$img" "${img%.jpg}.html"
done

工作原理

7 步处理流程

1. 加载并调整大小

  • 打开图像并转换为 RGB
  • 调整为宽度 900px（保持纵横比）
  • 使用 LANCZOS 滤镜进行高质量缩小

2. 构建模糊背景

  • 应用高斯模糊（半径 = 14）
  • 将亮度降低 35%（乘以 0.65）
  • 将饱和度降低 50%（与亮度灰度图混合）
  • 使用 BOX 滤镜缩小，再用 NEAREST 滤镜放大，进行像素化处理
  • 创建氛围感底层

3. 检测主体

  • 运行 rembg 生成 Alpha 蒙版
  • 阈值：蒙版均值 > 0.25 时判定为主体
  • **关键：**仅使用蒙版（不补充亮度信息）
  • 防止明亮背景出现 ASCII 字符

4. 添加像素网格叠加层

  • 每隔 24px 绘制白色方框
  • 不透明度为 5%，营造微妙的赛博朋克风格
  • 仅应用于主体单元格
  • 静态图层（仅绘制一次）

5. 构建字符网格

  • 单元格大小：11×14 像素
  • 对每个单元格采样 RGB 和亮度的平均值
  • **主体单元格：**从密度渐变字符集中选取 ASCII 字符，并规范化颜色
  • **背景单元格：**使用深蓝色（40，65，100）的 . 字符
  • ASCII 渐变：@#S08Xox+=;:-,. （亮度反转）

6. 合成图层

  • 图层 1：模糊背景（嵌入为 base64）
  • 图层 2：像素网格画布
  • 图层 3：ASCII 字符画布
  • 单个包装 div 将所有图层拉伸至相同尺寸

7. 添加动画（JavaScript）

  • **正弦波脉冲：**明亮的主体单元格呈周期性闪烁
  • **对角线扫光：**扫过的高光效果
  • **随机闪烁：**每个单元格有 0.25% 的概率闪烁，持续 2–8 帧
  • **悬停涟漪：**在 8 个单元格范围内显示交互式青色光晕
  • **字符散射：**悬停时，在 2 个单元格范围内显示随机字符
  • **动态光晕：**shadowBlur 随亮度和脉冲变化
  • **背景点：**不透明度固定为 30%

参数

参数值用途
TARGET_WIDTH900px输出图像宽度
CELL_W × CELL_H11×14px字符单元格尺寸
GRID_STEP24px像素网格间隔
模糊半径14背景模糊强度
BG darken0.65背景变暗程度（暗 35%）
BG desaturate50%背景颜色降低幅度
主体阈值0.25用于检测主体的蒙版均值
ASCII 渐变@#S08Xox+=;:-,. 密度渐变（暗→亮）
背景点颜色(40, 65, 100)背景字符 RGB
背景点不透明度30%背景字符透明度
网格不透明度5%像素网格可见度

颜色公式

def normalize_color(r, g, b):
    """Preserve hue, maximize brightness"""
    mx = max(r, g, b, 1)
    return int(r/mx*255), int(g/mx*255), int(b/mx*255)

此公式会规范化 RGB 值，使最亮的通道达到 255，在保留色相的同时，让主体像素的颜色饱和度最大化。

输出

独立的 HTML 文件：

  • 无外部依赖
  • 背景图片采用 Base64 编码
  • 内联 CSS 和 JavaScript
  • 可直接在浏览器中打开
  • 具有交互式悬停效果
  • 大小约为 500KB-2MB，具体取决于图片大小

视觉效果：

  • 60fps 动画
  • 根据鼠标移动做出响应
  • 电影感光照和辉光
  • 赛博朋克／复古美学

提示与最佳实践

图片选择：

  • 最佳： 肖像、人物、轮廓鲜明的物体
  • 良好： 产品照片、主体清晰的艺术作品
  • 避免： 风景、抽象图案、杂乱的背景

性能：

  • 处理时间：每张图片 5-15 秒
  • 输出大小：HTML 约 1-2MB
  • 浏览器性能：出色（基于 canvas）

艺术控制：

  • 较暗的源图片 → 对比度更强烈
  • 高对比度主体 → 边缘定义更清晰
  • 干净的背景 → 点阵更整洁
  • 居中的主体 → 视觉平衡更好

常见问题：

  • 未检测到主体： 尝试使用前景与背景分离更明显的图片
  • 太亮： 可能需要调整源图片
  • 动画卡顿： 检查浏览器硬件加速

相关变体

  • v2 (灰色背景)： 使用中性灰色背景替代像素化模糊效果的变体
  • 查看 skills/ascii-pixel-effect-v2/SKILL.md 了解实现方式

参考资料

  • 原始实现：2026 年 3 月
  • 授课者：Sensei
  • 灵感来源：经典 ASCII 艺术 + 现代 Web 动画
  • 技术：计算机视觉 + 生成艺术

许可证

MIT 许可证 - 可免费使用和修改

评论

支持 Markdown