最近试了不少拼豆网站，总感觉差点意思：
大多数工具的功能不全，且图片转像素的效果一般般——生成的颜色太碎或不准，拼起来很累；如果想手动修一下图，又缺少顺手、全面的编辑工具。

所以我做了一个拼豆网页：Perler Beads Generator。

不仅支持“导入图片生成图纸”，更像是一个完整的拼豆图纸工作台：可以微调生成效果，也可以手动画图、改图、实时预览 3D 效果、统计用量、导出清晰可打印的图纸。

网站从拼豆人的实际需求出发，反复打磨，力求功能完整、操作顺手。

在线体验：
https://jett-wu.github.io/Perler_Beads_Generator/

GitHub：
https://github.com/Jett-Wu/Perler_Beads_Generator

图中展示写实风格的一键生成效果（未经任何微调和修改）

一、为什么做这个工具

我自己在找拼豆图纸工具时，主要遇到以下问题：

1. 图片转图纸后：颜色太碎，拼起来很累，且不方便修改；
2. 色号不全；
3. 导出图纸不够清晰，打印效果差；
4. 用量统计、图层、调色等功能不完整；
5. 想临摹图片时，参考图和画布配合不够顺手；
6. 生成后想手动修图，但工具不够好用。

因此，本工具从拼豆人的实际需求出发，反复打磨，力求功能完整、操作顺手。

二、图片生成拼豆图纸

工具支持上传 PNG、JPG、WebP 图片，自动生成拼豆图纸。

目前有两种生成风格：

• 卡通风格：适合头像、表情包、线稿、动漫图；
• 写实风格：适合真实照片，保留更多颜色层次。

这里没有简单地把图片缩小后取单个像素，而是按拼豆格子对应的图片区域进行采样。

也就是说，每个拼豆格都会参考原图中对应的一小块区域，再决定最终使用哪个色号。这样边缘、主色块和大面积颜色会更稳定，不会因为某一个像素的颜色偏差导致整张图变得很碎。

三、MARD 色卡匹配

目前内置了 MARD 色卡：

• MARD 基础版 221 色；
• MARD 完整版 291 色。

生成图纸时，会把图片颜色匹配到 MARD 色号。
调色盘也支持按色号分组筛选，并且有最近使用颜色，方便频繁切换常用颜色。

四、像绘图软件一样编辑

左侧工具栏做成了类似绘图软件的操作方式，常用编辑功能基本都放进去了：

• 画笔：在画布上直接绘制拼豆。
• 橡皮：擦除指定位置的拼豆，可调整橡皮大小。
• 填充：快速填充连续区域。
• 消除：可消除同色连续块、所有同色或连续块。
• 换色：把图纸中的某一种颜色整体替换成另一种颜色。
• 吸管：从画布中吸取已有颜色。
• 移动：移动整张图案，或移动局部连续图案。
• 复制 / 粘贴：复制图案并粘贴到别的位置，支持跨图层。
• 镜像：对当前图案进行水平或垂直镜像。
• 形状：插入直线、矩形、圆形、三角形、箭头等基础图形。
• 文字：插入文字、数字、字母或符号，并可调整高度、间距和排列方向。
• 拖动画布：移动画布视角，方便查看和编辑大尺寸图纸。

五、多图层编辑

拼豆作品不一定只有一层。

有些作品会做叠层、镂空、局部装饰，或者把不同部分拆开制作。图层功能就是为这种场景准备的。

目前支持：

• 新建图层
• 删除图层
• 复制图层
• 拖拽排序
• 显示 / 隐藏
• 锁定
• 重命名
• 只看当前图层
• 是否计入用量

每个图层都是独立的，可以单独编辑，也可以叠加查看。

六、参考图临摹

除了自动生成图纸，也可以单独上传参考图作为底稿。

参考图支持：

• 显示 / 隐藏
• 透明度调整
• 显示在拼豆上方或下方
• 拖动 / 缩放

这个功能很适合手动画图。
比如自动生成之后，觉得某些细节不满意，就可以打开参考图，一边看原图，一边手动修。

七、3D 预览

左侧有一个实时 3D 预览区域，可以大致查看拼豆完成后的效果。

3D 预览会跟随当前图纸变化，也支持放大查看。
豆子形状可以在圆形和方形之间切换。

八、用量统计

右侧有用量统计面板，会自动按颜色统计：

• 色号
• 颗数
• 预计包数

每包数量可以自己设置，默认按 500 颗一包计算。

如果有多个图层，也可以选择统计全部图层、当前图层，或者指定图层。

九、当前图层调整

有时图纸生成后，整体颜色可能偏暗、偏灰，或者颜色数量太多。
所以我加了一个“调整”面板，只作用于当前图层。

支持：

• 亮度：整体调亮或调暗当前图层。
• 对比度：增强或降低明暗反差。
• 饱和度：调整颜色鲜艳程度。
• 色温：让画面偏暖或偏冷。
• 色相：整体偏移颜色方向。
• 反色：将当前图层颜色反转。
• 灰阶：把当前图层转换为灰度效果。
• 黑白：把当前图层转换为黑白高对比效果。
• 颜色整理：合并相近颜色，减少不必要的碎色。
• 色数上限：限制当前图层最多使用的颜色数量。

这些调整会直接反映到画布上，配合撤销功能使用会比较安全。

十、导出图纸

目前支持两种导出格式：

• PNG
• PDF

导出时可以设置：

• 按画布尺寸/图案尺寸导出
• 是否显示色号
• 是否显示辅助线
• 作品昵称
• 作者昵称

导出的图纸会包含坐标、辅助线、色号和底部用量清单，适合直接打印。

如果有多个图层，也会按图层分别导出图纸，方便分层制作。

十一、导出用量和编辑记录

除了图纸，也可以导出用量清单和编辑记录。

用量清单会导出为 Excel。
如果项目里有多个图层，会包含总数和各个图层的统计，方便整理材料。

编辑记录会导出为 JSON。
下次可以重新导入，继续编辑之前没做完的图纸。

十二、技术栈

项目主要使用：

• React
• TypeScript
• Canvas API
• Three.js
• Vite

部署方式是 GitHub Pages，构建后自动发布。

本地运行：

npm install
npm run dev

构建：

npm run build

十三、项目结构

核心文件大致如下：

src/
  App.tsx                # 页面布局、状态和主要交互
  WorkspaceCanvas.tsx    # 2D 画布、工具、参考图、移动复制等逻辑
  ThreePreview.tsx       # 3D 预览
  imageToBeads.ts        # 图片转拼豆图纸算法
  palette.ts             # MARD 色卡和颜色匹配
  project.ts             # 项目数据、图层、自动保存
  exporters.ts           # PNG / PDF / Excel / JSON 导出
  usage.ts               # 用量统计
  styles.css             # 页面样式

Github

 项目地址：
https://github.com/Jett-Wu/Perler_Beads_Generator

在线体验：
https://jett-wu.github.io/Perler_Beads_Generator/