菠萝拼豆转图器 · Professional Perler Bead Pattern Generator
Upload an image → Get a professional perler bead blueprint in seconds.
| Core Capabilities | Details |
|---|---|
| 🎨 MARD 221-Color Palette | Full MARD standard color card, 9 color series, auto RGB-to-MARD matching |
| 🧩 Gradient Merge | Smart region-based merge, configurable threshold (0-15), 60% dominant-color rule to preserve gradients |
| ✏️ Auto Outline | One-click replacement of pattern edges with H7 black contour — no more manual border fixing |
| 🔧 Smart Smoothing | Noise reduction and debris cleanup for cleaner blueprints |
| 🖱️ Canvas Controls | Right-click drag to pan · Scroll wheel to zoom (10%-300%) · Left-click to recolor any cell |
| 🔄 Mirror Flip | Horizontal / Vertical flip — only flips bead cells, grid & rulers stay unchanged |
| ↩️ Undo (50 steps) | Ctrl+Z undo history |
| 🌐 Trilingual UI | 简体中文 · 繁體中文 · English |
| 🧾 Engineering Blueprint Export | Grid + ruler (red partition every 10 cells) · Color legend with counts · Title bar · Stats |
| 📦 Single-file HTML output | Zero dependencies · Double-click to run · Easy to share |
PineBead Studio（菠萝拼豆转图器） 是一款面向拼豆爱好者的专业转图工具。只需上传一张图片，即可自动生成带有 MARD 221 色号标注的工程级施工图纸，让拼豆制作从零经验到成品，只需三步。
💡 核心优势：单文件 HTML，零依赖，双击即用；MARD 色号智能匹配；带标尺/色板/统计的专业图纸输出；渐变色合并、自动描边大幅减少后期手工修正工作量。
- Go to the Releases page and download the latest
PineBead-Studio.html - Double-click to open it in any modern browser (Chrome / Edge / Firefox / Safari ≥14.1)
- Done!
Prerequisites: Node.js ≥ 16
# Clone the repository
git clone https://github.com/MrHorfen/PineBead-Studio.git
cd PineBead-Studio
# Install dependencies
npm install
# Start dev server (http://localhost:3000)
npm run dev
# Build single-file HTML
npm run build
# Output → dist/index.html (just this one file!)Use any AI image tool to optimize your original image:
- ✅ Remove gradients & photo-realistic shadows
- ✅ Pixelate / posterize to flat color blocks
- ✅ Do NOT generate grid lines — we handle that
- ✅ Match perler-bead color style (not too many colors)
- Upload the image
- Set X/Y grid size (30–120 cells recommended; 200×200 warning only, not blocked)
- Adjust background threshold (default 240 works for most white-bg images)
- Toggle Smart Smoothing to reduce noise
| Option | When to use |
|---|---|
| 🧩 Gradient Merge | Complex images with many gradient shades. Start with threshold 3–5, tune up or down |
| ✏️ Auto Outline | Any character / cartoon pattern that needs a clean black border |
| 🔄 Mirror Flip | Patterns for keychains or items where the back side matters |
- Left-click any cell → floating palette opens (8 similar colors + full palette)
- Right-drag to pan · Scroll to zoom · Ctrl+Z to undo
- Click 💾 Export Blueprint → PNG saved!
The exported blueprint includes:
- Grid with ruler (red lines every 10 cells)
- Title bar (work name, author, size, color count, bead count)
- Color legend (swatch + MARD code + quantity used)
| Operation · 操作 | How-to · 方式 |
|---|---|
| Recolor a cell · 格子换色 | Left-click · 左键点击格子 |
| Pan canvas · 拖动画布 | Right-click + drag · 右键按住拖动 |
| Zoom · 缩放 | Mouse wheel · 鼠标滚轮（10%~300%） |
| Undo · 撤销 | Ctrl + Z or undo button · Ctrl+Z 或撤销按钮 |
| Flip · 翻转 | Top bar: Normal / H-Flip / V-Flip · 顶部切换 |
| Language · 语言切换 | Header right corner · 右上角 |
| Layer | Technology |
|---|---|
| UI Framework | Vue 3 (Composition API) |
| Build Tool | Vite 5 |
| Rendering | HTML5 Canvas (bitmap + ruler + legend all drawn) |
| Color Matching | Euclidean RGB distance against MARD 221-color table |
| Gradient Merge | BFS connected components + boundary dominant-color ratio (≥60%) |
| Auto Outline | 4-neighborhood edge detection + H7 replacement |
| Single-file Pack | vite-plugin-singlefile |
| Code Protection | JS obfuscator (control-flow flattening + string encoding + dead-code injection) + runtime integrity check |
The most complex (and useful) algorithm in this project. It solves the "too many color fragments" problem when converting photos or gradient-heavy illustrations:
- Build regions — Run BFS on the grid to detect connected same-color regions
- Score fragments — Any region smaller than 5 cells is considered a fragment candidate
- Boundary analysis — For each candidate, sample the colors of all neighbor cells across its boundary
- Dominant color rule — Only merge if one neighbor color accounts for ≥60% of the boundary colors
- Threshold gate — Color similarity must be ≤ the user-adjustable threshold (0~15, 0 = identical colors only)
- Conservative by design — Never merges regions that would destroy a deliberate gradient transition
This project is released under the MIT License — see the bottom of this file for details.
Built with ❤️ by @菠萝的自我救赎 for the perler-bead community.
- 🍍 Brand watermark kept in both exported canvas and webpage header
- 🤝 Need custom VIBECODING / AI coding collab? Hit me up on 抖音 / 小红书 @菠萝的自我救赎
- ⭐ If this tool saved you hours of hand-counting cells, a GitHub Star is the best thank-you!
Made with 🍍 + Trae Code · 2026