VEXELiZE

中文 | English

把“不太像像素画”的像素画，重新变得干净、整齐。

Vexelize 可以自动找回图片里最可能的像素网格，清理抗锯齿、杂色和偏移，再导出可无限缩放的 SVG。它特别适合 AI 生成的近似像素画、被放大的像素素材，以及边缘不够利落的小图标。

打开 Vexelize 在线版，立即开始

打开网页，导入图片，检查效果，然后下载 SVG。所有处理都在你的浏览器中完成，图片不会上传到服务器；下载项目后也可以完全离线使用。

你或许遇到过这些问题？

图片看起来像像素画，放大后却并不规整：

• 方格大小不一致，边缘有轻微偏移；
• AI 添加了抗锯齿、渐变和细碎杂色；
• 图片虽然被放大了，却不知道原本一个像素应该有多大；
• 普通矢量转换会生成大量不规则路径，结果既不干净也不好编辑。

Vexelize 会自动寻找最可能的像素网格，重新采样颜色并清理噪声。你可以随时对照原图、手动细修，最后得到由规整色块组成的 SVG，不必从头临摹每一个方格。导出的图形可以无损缩放，边缘始终清晰，也便于在设计软件中继续调整颜色、尺寸和布局。

SVG 不一定比原图更小，实际体积取决于网格尺寸、颜色数量和图案复杂度。开启连续色块合并可以减少节点，让结构更简洁。

三步上手

1. 导入图片

打开在线版本，点击右上角的“导入图片”，或把图片拖到右侧的导入区域。支持不超过 10 MB 的 PNG、JPG、WebP 和 GIF。

2. 检查并规整

导入后会自动识别最佳格点并生成结果。你可以：

• 点击“对比”，拖动分隔线查看原图与规整结果；
• 调整目标宽度和颜色数量，再点击“重测”；
• 启用移除孤立像素、平滑锯齿或合并相近颜色；
• 使用画笔、橡皮擦、填充、吸色和调色板进行细修。

3. 导出 SVG

切换到“SVG”页签，设置单像素尺寸、背景和连续色块合并，然后点击“下载 SVG”。

在你的电脑上离线使用

Vexelize 不需要安装，也不需要构建。想在没有网络时使用，只需：

1. 点击 GitHub 仓库页面上方的 Code；
2. 选择 Download ZIP，下载后解压；
3. 使用浏览器打开文件夹中的 index.html。

到这里就可以正常导入、编辑和下载 SVG。只有“复制 SVG”可能受到浏览器的本地文件权限限制；遇到这种情况，可以继续使用下载功能，或在项目目录运行：

npx serve .

这只会在你的电脑上启动一个静态页面服务，不会上传图片。

主要功能

自动识别与规整

• 自动判断放大像素画中一个逻辑像素的实际尺寸。
• 识别 AI 图片中的近似格点，并保持原图宽高比。
• 减少抗锯齿、颜色噪声和格内纹理。
• 移除孤立像素、平滑锯齿、合并相近颜色。
• 支持 4 × 4 至 256 × 256 的画布，以及最多 256 种颜色。

编辑与对比

• 画笔、橡皮擦、区域填充和吸色工具。
• 撤销与重做。
• 可拖动的原图/结果对比分隔线。
• 调色板选色、按明度排序和全局颜色替换。
• 双击项目名即可重命名；项目自动保存在浏览器本地。

SVG 输出

• 实时查看 SVG 预览和节点数量。
• 自定义单像素尺寸与背景颜色。
• 合并连续同色块，减少 SVG 节点并简化结构。
• 复制 SVG 代码或直接下载文件。

使用体验

• 浅色与深色主题，可跟随系统或手动切换。
• 桌面和移动端响应式布局。
• 图标、字体和处理逻辑都包含在项目内，无需联网加载。

常用快捷键

快捷键	操作
B	画笔
E	橡皮擦
G	填充
I	吸色
C	切换原图对比
Ctrl/Cmd + Z	撤销
Ctrl/Cmd + Shift + Z	重做

项目名编辑时按 Enter 确认，按 Esc 取消。

为什么它能找到原来的像素格

你不需要理解算法也能使用 Vexelize。简单来说，它会先从原图中寻找重复出现的颜色边界，判断最可能的像素块大小；对于不够规整的图片，再通过感知颜色边缘、周期相位和单元格内部差异复核结果。

这种组合可以区分真实像素大小与它的倍数或约数，同时避免把方形图片错误识别成比例悬殊的网格。高分辨率、极端模糊、摄影图或几乎没有重复边界的图片仍可能需要手动调整目标宽度。

创建你自己的在线版本

1. 点击本仓库右上角的 Fork；
2. 在 Fork 后的仓库中打开 Settings → Pages；
3. 将发布源设为 Deploy from a branch；
4. 选择 main 分支和 / (root) 目录并保存。

GitHub Pages 会发布仓库根目录中的静态应用，后续推送到 main 后会自动更新。发布完成后，访问地址为：

https://<你的 GitHub 用户名>.github.io/vexelize/

例如 GitHub 用户名为 kevynf，访问地址就是 https://kevynf.github.io/vexelize/。首次启用后可能需要等待几分钟才能访问。

项目结构

• index.html：应用入口和界面结构。
• styles.css：主题、排版和响应式布局。
• app.js：编辑、格点识别、规整与 SVG 导出逻辑。
• vendor/lucide/：Lucide 图标脚本与许可证。
• vendor/fonts/jersey-10/：Jersey 10 字体与 OFL 许可证。

参与项目

发现问题或有功能建议，欢迎提交 Issue；愿意参与改进，欢迎发起 Pull Request。如果 Vexelize 对你有帮助，也欢迎点亮 Star。

许可证

Vexelize 的项目代码采用 MIT License。Lucide Icons 使用 ISC License，Jersey 10 使用 SIL Open Font License 1.1，完整许可证文本位于对应的 vendor/ 目录。