返回项目列表
公开项目 2026 图片转逐笔绘画过程

image2strokes

把一张图片自动提炼成它被一笔一笔画出来的完整过程并回放:每一笔都是纯色,全程跑在浏览器里,不上传任何图片。

示例笔数
3,913 ~ 30,526 笔
可见差异
插画 0.33% · 照片 2.04%
回放时长
2 / 4 / 8 分钟三档
导出
WebM · 笔触 JSON · PNG
01Highlights

项目要点

  • 每一笔都是纯色——笔内不带照片纹理和渐变,笔与笔允许互相覆盖,成品是靠覆盖关系叠出来的,不是滤镜堆出来的。
  • 分四步推进,像人一样画:铺底色(整片刷满、不预留空位)→ 分层铺色(一个对象画完再画下一个)→ 收形 → 点睛与题字落款;笔形带手抖、弧线与宽窄变化,换地方时笔尖抬起来走过去,纸面上留一条浅弧线。
  • 自动按图判断参数:纹理强的照片把色数提到 40~44、笔更细并放宽笔数上限;同一格同一色阶的散点补笔合并成一笔(掩膜互不相交,像素结果完全等价),照片类笔数比逐点补少一半左右。
  • 提炼管线跑在 Web Worker 里,1024px 的图约 20~40 秒;一轮去重优化(全图最近色、srgb2lab 分配、背景色场模糊的边界判断、残差扫描的重复计算)把提速做到 1.4~1.5 倍,而三张示例的成品逐像素 md5 完全一致。
  • 三种笔触风格(平涂马克笔 / 铅笔速写 / 油画厚涂)与三档时长;回放支持 0.25×~4× 调速、拖动定位、按阶段跳转、一键对比原图,整段过程可录成 WebM,笔触脚本可导出为含裁剪掩膜的 JSON。
02Story

细节

难点不在颜色而在顺序:要用纯色笔触还原一张图,就得先决定“哪些像素归哪一层、谁盖住谁”,再决定每一层按什么路径刷过去。所以管线先做色板与区块划分,把「挨着 + 颜色相近」的像素归成同一层(一整片蓝底是一层、一整圈黑框是一层、一个字母是一层),每层按自己的“完整形状”来画——被上层盖住的部分也照样画出来,遮挡关系就是这么自然产生的;细长的一层(黑框、支柱、字的笔画)走中轴线,直线一笔到底,不切段也不手抖。

回放这条时间轴是三段时间拼出来的:落笔绘制、抬笔移动的弧线、换阶段的停顿,所以看得见“手在纸上走”。为了拖动定位不卡,管线每隔一段存一次关键帧快照,跳转时从最近的关键帧续画而不是从头重画;白点自检在后台画布上推进,补笔算好后追加到时间轴末尾,不挡着正在画的画面。最后一层细笔会把纹理颗粒和毛发点回来,所以近看也不糊。

03Source

源码

仓库结构和 README 都做成了站内可读的页面。

文件
53 个
目录
5 个
仓库大小
50.0 MB
默认分支
main
最近更新
2026-10-14
JavaScriptCanvasWeb Worker纯前端