图像精灵图生成器
把许多小图像（图标、UI 状态、角色帧）合并成一个可下载的 PNG，并发出一个用 `background-position` 定位每个的 CSS 块。当图标字体、SVG 精灵或真正的精灵图管线不可选时，减少 HTTP 请求。布局有水平条带、垂直条带或固定列网格；图集尺寸适配每行或列的最大项。文件通过 canvas 完全在客户端处理 —— 你的图标永远不离开浏览器。
—
使用方法
- 拖入或选择图像。它们按 OS 交付的顺序出现。
- 选择布局：水平/垂直条带最简单，网格更密。设置 padding 避免溢出。
- 下载 PNG，复制 CSS，一起发布 —— 匹配你在 CSS 前缀中放的类名。
常见问题
- 精灵图 vs. SVG 精灵 vs. 图标字体？
- PNG 精灵在源是真实光栅（游戏美术、照片缩略图）时仍获胜。UI 图标学优先选 SVG 精灵（`<symbol>` + `<use>`）—— 它们缩放并响应 currentColor。图标字体现在大多是遗留回退。
- 透明度怎么处理？
- 如果保持背景透明，PNG 保存为带 alpha（你在预览中看到的棋盘只是让透明区域可见）。如果选择白色或黑色，这些会烘焙到图集中。
相关工具
图像双色调效果
为任何图像应用双色调效果 — 选阴影色和高光色，调整中点和对比度，下载结果。Spotify 风格封面两次点击搞定。
图片 0 0
图像模糊
在浏览器中对任意图像应用高斯、方框或运动模糊。半径 0-64 px 可调,提供等效 CSS filter 字符串可复制。
图片 0 0
CSS 滤镜演练场
可视化组合 blur、brightness、contrast、hue、sepia、invert 等 9 项——复制 CSS 滤镜或 Tailwind 任意值。
颜色 0 0
图片 → ASCII 艺术
把任意图片转为 ASCII 艺术——可调宽度、字符集与反相，完全在浏览器中。
图片 0 0
Lorem Picsum URL 构造器
从 picsum.photos 构造占位图 URL — 尺寸、灰度、模糊、用于稳定图片的 seed，或指定图片 ID。
图片 0 0
图片像素化
拖入图片，按任意块尺寸像素化 — 用于打码截图或制作复古艺术的清晰像素方块。
图片 0 0