1. artcraft 到底在做什么我为什么折腾这个项目先交代一下背景。我平时喜欢折腾各种小工具也玩过一阵拼豆、十字绣和串珠。这两件事看起来八竿子打不着但实际撞到一起之后我发现自己反复遇到同一个问题网上一堆好看的像素图、表情包、游戏截图想做成实体小工艺品却卡在“怎么把一张普通图片变成能照着做的图纸”这一步。有人可能觉得这不就是把图片马赛克化吗设计软件里滤镜拉一下就有。但真正上手之后会发现手工艺图纸的要求和“马赛克滤镜”完全是两码事。拼豆要算清楚每颗豆子的色号十字绣要标出每一针的线号和格数串珠要考虑珠子孔径和成品尺寸。更麻烦的是不同工艺有不同规格同一张图换一种介质整个转换逻辑都要重来。后来我花了几个周末写了个小项目名字就叫 artcraft。核心功能很简单输入一张图输出一份可以照着做的手工艺图纸附带色号对照、物料统计和打印排版。这篇文章不打算做成一份项目说明书而是把我在设计、实现和实际使用中踩过的坑、想通的逻辑、后来改掉的设计都摊开来说一遍。如果你也想做一个类似的“图片转图纸”工具或者单纯想理解这类工具背后的计算思路应该能找到点有用的东西。1.1 一个被反复提出的需求从“图像”到“工艺”的翻译先说最基础的问题。手工图纸的本质是什么是一张带坐标的“映射表”告诉你第几行第几列应该放什么颜色的材料。所以这个工具的本质也不是图像处理而是翻译把图像像素的颜色翻译成工艺材料能表达的符号和色号。这个翻译过程有三个隐藏难点。第一图像分辨率远高于工艺网格。照片随便一拍就是几千像素宽而一块拼豆底板通常只有几十格想做大幅作品还得拼接。所以必须想清楚怎么降采样降太狠会丢细节不降又根本没法做。第二颜色数量是受限的。一张真实照片可能有几十万种颜色但拼豆色号可能只有几十种十字绣线号上百种而串珠的常用色号往往更少。怎么把图中的颜色映射到“最接近”的色号同时还要让整体观感不崩这比单纯找最近色要复杂。第三输出不能只有一张图。手工者真正拿到手的是网格图、坐标说明、色号列表、用量统计有时还需要分页打印的 PDF。这些东西必须整套一起生成少一个都会在制作中途卡壳。我一开始只写了个简单的脚本把图切成格子、填色、输出图片。结果自己用的时候第一版就翻车了色号对不上用料算不出来打印后尺寸也不对。于是才有了 artcraft 后来的完整结构。1.2 设计边界不做一个“编辑器”而做一个“转换器”项目名称刚定下来的时候我差点把它做成一个在线编辑器支持自己拖格子、改颜色那种。后来冷静想了想大部分人的真实使用流程不是“从零画图”而是“我手里已经有一张图想快速变成图纸”。编辑器功能看着很酷但开发和维护成本极高而且和现有设计软件拼不过。所以我把边界收紧到了三条。输入一张常见格式图片设置关键参数拿到一份可打印的工艺图纸。少了交互式涂改多了批量处理能力这让 artcraft 可以一次处理几十张图更适合小批量出图。这个取舍后来被验证是对的。至少在我身边多数人并不想对着像素网格一格格修他们只是想要一个能用的“转换器”。1.3 为什么用 Python 来搭这套逻辑技术选型上我几乎没犹豫直接选了 Python。原因有三点。第一图像处理的生态最全很多预处理手段不用自己重新造轮子。第二做原型速度快一个下午就能跑通完整链路非常适合这种“先验证逻辑再补功能”的小项目。第三后续无论是做命令行工具、Web 服务还是桌面小应用Python 的迁移成本都相对可控。需要说明的是最初我还考虑过用 Node.js 做整套服务因为浏览器端可以直接显示画布交互体验会好一点。但算了一下颜色匹配、网格生成和 PDF 排版这部分的工作量最后还是选择了 Python。这算是我在项目初期的一次务实取舍先把后端逻辑做扎实前端只是展示层逻辑不需要依赖浏览器运行。2. 核心模块拆解图像预处理、调色板匹配与图纸导出artcraft 的整体链路可以拆成四段预处理、网格化、调色板匹配、绘制图纸。每一段都有不少细节下面我按模块讲。2.1 图像预处理不要急着缩小图片先把“杂质”去掉很多人一上来就把图片缩到目标网格尺寸比如直接把 1200×1200 的图缩成 48×48然后开始抽色。这样做出来的图纸往往脏兮兮的单个格子的颜色会受旁边像素影响边缘轮廓发虚。更稳妥的做法是先做几步预处理。第一步是统一画布尺寸把透明通道合成到白色底上。手工艺图纸大多白底打印透明通道处理不好导出后容易出现黑块。第二步是根据工艺类型决定是否做边缘增强比如拼豆图纸通常希望轮廓清楚可以稍微提高局部对比度。第三步才是缩放。缩放方法也有讲究。普通缩图用线性插值就够了但缩到极小尺寸时线性插值会让边缘变“灰”也就是在两种颜色之间产生过渡色。干净一点的网格图需要用“最近邻”思想来做最终量化也就是每个格子里取最代表性的颜色而不是把格子内所有像素平均了事。实际操作中我会先缩到一个比较宽松的中间尺寸比如目标网格的 4 到 8 倍做一次轻度降噪再用区域采样得到每个网格的代表色。这样既能保留轮廓又能避免过度平均造成的脏色。2.2 调色板匹配不是找“最近颜色”而是匹配“可用的材料色”网格化之后你会得到很多像素的颜色比如某个格子的 RGB 是 (180, 92, 40)。下一步要做的就是去工艺色板里找最接近的颜色。最简单的方法是欧氏距离直接在 RGB 空间算距离。但这个方案有个明显问题RGB 空间里的距离并不等于人眼感知的颜色差异。红色的“深一点”和蓝色的“深一点”在 RGB 数值上可能差距一样但人眼感受完全不同。所以我在中后期把匹配逻辑换到了 Lab 色彩空间用 CIEDE2000 色差公式来判断接近程度。这个公式对人眼感知的建模更贴合实际匹配结果稳定很多。除了“距离”问题还要处理“数量限制”问题。比如一张照片缩到 48×48可能有几百种不同颜色。但你手里的拼豆只有 30 种那就必须把颜色聚成 30 类。我提供两种策略。一种是用户直接指定色板程序逐格匹配另一种是程序自动聚类先把颜色归纳成 N 类每类再匹配到最接近的色号。第二种策略的好处是整体效果更协调不会出现同一块区域里颜色跳来跳去。2.3 工艺参数换算拼豆、十字绣和串珠的尺寸完全不是一回事图纸不只要好看还要能照着做。这就涉及到各工艺的规格换算。拿拼豆举例。单个豆子的直径一般是 5 毫米成品宽度约等于横向格数乘以 5 毫米再除以 10单位变成厘米。48 格宽的图做出来大约 24 厘米。如果你只有 29×29 的拼豆板那 48 格就要分成多块拼接图纸上必须标出拼接缝的位置。十字绣更复杂一些常用布料规格有 11CT、14CT。CT 表示每英寸有多少个格子14CT 就是每英寸 14 格。图纸上的一格对应绣布上的一个十字所以同样一个 100×100 的图案绣在 14CT 布上成品宽度大约 18 厘米绣在 11CT 布上就变成 23 厘米左右。如果用户不输入布料规格我默认按 14CT 计算但所有图纸上都会标明这条换算关系方便自行修改。串珠又不一样。珠子尺寸常见的有 2.6 毫米、3 毫米、4 毫米几种孔径也会影响是否能穿过针线。图纸上我会额外标出“按 3mm 计算”的成品尺寸同时给一个按 2.6mm 计算的参考值便于用户根据手头材料自行判断。2.4 图纸导出PNG 只是预览PDF 才是正式交付物最初版本只导出 PNG但很快发现实用性很差。因为手机或电脑上看图用户没法准确判断打印尺寸也没法核对多页拼接。后来我把 PDF 作为主输出格式PNG 只用于快速预览。PDF 的排版逻辑是第一页放成品效果图中间页放带网格线的像素图最后一页放物料清单和色号表。网格线用矢量线条绘制确保放大缩小都不会发虚。每一行每一列都标上坐标用户在制作时可以直接按“坐标色号”定位不给制作者增加读图负担。生成 PDF 用的库是 reportlab。它在排版控制上非常稳比如分页、页眉、表头这些都对得上。不过它也有点学习成本尤其是表格样式设置和跨页处理建议准备一个统一的样式函数不然几个页面写下来代码会越来越乱。3. 一次完整的实战把一张照片变成可落地的拼豆图纸讲完模块我用一个实际案例走一遍完整流程。假设手头有一张 1000×1000 像素的游戏角色头像目标是做一个 48×48 的拼豆挂件用最常见的小豆规格底板可选 29×29 的拼豆板需要拼接。3.1 先确定工艺参数再决定处理策略这一步很容易被忽略。很多人先把图处理完了才发现尺寸不对色号数量不够又回头重来。我的处理顺序是固定的。先确认拼豆豆子直径默认 5mm再算目标成品宽度规定不超过 25cm所以网格数上限设为 48然后确定色板集合也就是手头有哪些颜色的豆子把它们的 RGB 近似值录入配置库。以上确认完再开始跑预处理。因为网格数确定原始图片会被缩放。处理时先缩到 192×192 的中间尺寸也就是目标网格数的 4 倍做一次轻量锐化再对每个 4×4 的小区域取平均色得到 48×48 的网格数据。3.2 核心代码逻辑网格量化与色号匹配这部分我贴一段简化过的代码逻辑可以直接复用。import numpy as np from PIL import Image, ImageFilter def load_as_grid(image_path, grid_w, grid_h, px_ratio4): image Image.open(image_path).convert(RGB) # 合成白色底避免透明通道变黑 background Image.new(RGB, image.size, (255, 255, 255)) background.paste(image, maskimage.split()[-1] if A in image.getbands() else None) image background # 高斯模糊去噪再做轻度锐化 image image.filter(ImageFilter.GaussianBlur(0.5)) image image.filter(ImageFilter.UnsharpMask(radius1, percent50)) # 缩放到中间尺寸区域求平均得到最终网格 mid_w, mid_h grid_w * px_ratio, grid_h * px_ratio image image.resize((mid_w, mid_h), Image.Resampling.LANCZOS) arr np.array(image, dtypenp.int32) arr arr.reshape(grid_h, px_ratio, grid_w, px_ratio, 3) grid arr.mean(axis(1, 3)).astype(np.uint8) return grid def match_palette(grid, palette): # palette 是 [(rgb, 色号名), ...] h, w, _ grid.shape result [] for y in range(h): row [] for x in range(w): r, g, b grid[y, x] r2, g2, b2 palette[0][0] best_idx 0 best_dist (r - r2) ** 2 (g - g2) ** 2 (b - b2) ** 2 for idx, (color, _) in enumerate(palette): pr, pg, pb color dist (r - pr) ** 2 (g - pg) ** 2 (b - pb) ** 2 if dist best_dist: best_dist dist best_idx idx row.append(palette[best_idx][1]) result.append(row) return result这里为了演示用了简化版匹配。实际项目里我是在 Lab 色彩空间做 CIEDE2000 色差计算的速度和欧氏距离差不多但准确度更接近人眼判断。3.3 根据图纸算物料清单网格匹配完之后每一格都有了色号。这时直接统计每种色号出现的次数就能估算需要多少颗豆子。48×48 的图纸一共有 2304 格。假设统计结果显示某个色号出现了 180 次那至少需要 180 颗豆子。考虑到制作过程中的损耗和拼豆板间隙我会在清单里自动加 5% 的余量并把结果向上取整到整袋或整盒。比如 180 颗加 5% 是 189 颗如果每袋 200 颗就建议买 1 袋。物料清单还会标注每袋大概能做多少个同尺寸的作品方便批量生产的时候算成本。这里可以用公式一个作品颗粒数 横向格数 × 纵向格数。预算成本时再乘上单颗单价即可。3.4 输出排版与打印效果检查把网格数据交给 PDF 生成模块后第一页是一张 48×48 的拼豆布局图每个格子都绘制了色块和色号编号。色块面积如果太小打印后很难辨认所以我会强制要求每个格子不低于 4mm。一张 A4 纸大概是 200mm×280mm 的可打印区域48 格横排每格 4mm 是 192mm正好放下。如果网格超过 60 格我建议拆分到多页而不是硬挤在一张纸上。分页时要注意相邻两页要有一个重叠列方便制作时拼对齐。4. 常见问题与排查记录这些坑我替你们先踩了一遍使用过程中我遇到了不少问题。有些是代码逻辑问题有些是打印问题还有些是材料和色号带来的问题。我把高频问题的现象、原因和解决办法整理成了一张速查表。问题典型现象根本原因解决办法图纸颜色偏灰偏暗打印后像蒙了一层灰RGB 色差算法与人眼感知不符改用 Lab 色差必要时人工校正色板基准值透明背景变黑块导出 PNG 后边缘是黑色透明通道未合成到白底预处理时强制合成白底或棋盘格底色号相近买错材料两个灰在屏幕上分不清材料实物色与屏幕色存在差异输出色号表时附带最小色差排序和近似色替换列表打印尺寸不对图纸比实际成品大很多未按工艺参数校准 DPI每张图纸都标注目标成品尺寸并按网格数换算打印比例网格太大看不清楚图纸格子挤成一团网格数过多塞进一页超过 60×60 自动分页或用多页拼接模式色号数量爆炸一张图上用了 50 多种豆子自动聚类时色板限制没生效明确色板容量聚类时把输出类别数量压到色板上限以内4.1 为什么打印出来之后轮廓总是发虚图纸上的轮廓发虚问题往往不在打印而在抽色。尤其是照片类素材如果缩放时没有做边缘处理格子里平均色会把深色轮廓和浅色背景混合成中间色导致轮廓线不干脆。我从实践中得到的经验是在缩放前先跑一次“可选颜色”级别的调整。简单说判断每个格子的主色调如果它是一个介于两种色号之间的中间态就不要直接平均而是看它邻近格子的颜色分布再决定归到哪一类。这样能明显减少过渡色。4.2 电脑上看着挺像实物一摆就不是那么回事这是手工艺工具绕不开的物理限制。屏幕的发光色和材料的反射色不一样尤其是荧光色、金属色、深紫色屏幕上看和实物放一起完全是两个感觉。我采取的办法是建立“人工校正色板”。工艺色号厂商一般会给 RGB 参考值但这些值经常和实物有偏差。我会拿手头的材料在标准光源下拍一遍再用取色器逐色校正存成一份本地基准色板。这份色板才是 artcraft 真正用来匹配的依据。虽然前期录入很麻烦但后续出图准确度提升非常明显。4.3 串珠色号在不同品牌之间对不上串珠色号的问题比拼豆更麻烦。同一家品牌的同一色号在不同批次都可能存在色差更别说跨品牌了。所以图纸上如果只写“色号 713”用户拿别的品牌的珠子一定会翻车。我的图纸上会同时保留两层信息一层是品牌色号一层是 RGB 参考色块。用户没有同品牌材料时可以直接找颜色最接近的替代品而不是死盯着色号不放。这个思路也延续到了物料清单里每个色号都附带色块预览。4.4 明明选了 A4 纸打出来尺寸却不对这个问题十有八九是打印对话框里的“适应纸张”选项造成的。PDF 本身是矢量的像素图部分也画成了矢量色块打印时如果被缩放模式影响格子尺寸就会变。我在图纸页脚固定加了一行参考信息实际成品尺寸 横格数 × 单格直径。打印完之后用户可以用尺子量一下纸上的参考条长度如果不对就调整打印比例。这个参考条看似不起眼但真的很管用能省掉大量反复打印的时间。5. 下一步可以扩的方向以及我总结出的几个小建议artcraft 目前已经能稳定承担图片转拼豆、十字绣、串珠图纸的工作但我心里也清楚它的局限和后续可能的方向。5.1 批量导入和命名规则手工工作室经常会遇到一次要出几十张图纸的情况。目前逐张处理没问题但如果能支持文件夹批量导入、按文件名自动映射工艺参数使用效率会高很多。进一步还可以做自动排版把多张图纸合并到一个 PDF 里统一打印和裁切减少纸张浪费。5.2 自定义色板与参与者共享色板是这类工具的灵魂。如果能在工具里维护多套人色板比如拼豆专用、串珠专用、十字绣线号专用并且支持导入导出就能让使用者之间互相分享色板数据。我甚至考虑过做一份“实物色板拍照校准”的流程用手机拍照后自动生成修正后的 RGB 基准值这个方案还没完全跑通但方向是值得探索的。5.3 根据踩坑经验留给后来的开发者几句话第一不要追求“全自动抽色”。“全自动”意味着更多判断逻辑和更多不可控的边界情况。我的建议是默认参数满足大多数情况但一定要保留人工微调入口比如手动指定某个色块归到哪个色号。第二图纸信息冗余比信息精简更重要。同一份图纸上即使有重复的色号表、重复的尺寸标注也值得保留。因为手工制作过程中人往往会裁剪一张纸单独拿到手边看信息不重复就会来回翻页体验很差。第三打印验证要提前做。不要在开发环境里觉得尺寸没问题就直接交付建议先把几份图纸打印出来用尺子量一遍再回头调参数。我在实际使用中还发现这类工具最让人舒服的状态是“跑一次就完成”而不是“交互半天再出图”。所以后续哪怕加了更多参数我也会坚持把默认路径设计得足够简单让第一次使用的人能直接选中图片、点一下按钮、拿到成品图纸。这种克制比加一堆炫酷功能更重要。