被用户吐槽后，我连夜优化了这个拼豆小工具

Hi，我是松柏。

上周四我做了个「图片转拼豆图纸」的小程序工具女朋友迷上拼豆后，我做了一个自动生成图纸的小程序，也是收到了很多小伙伴的喜欢，大家也给我反馈很多不好用的地方，比如白色背景也被标成了色号、WebP 图片传不了、裁剪页拖动会抖等等。

所以我赶紧把这些点优化了一遍，一起来看看优化的地方和效果吧~

第一个问题就是如果上传的图片是白色背景的，生成出来整张图纸全是色号，背景区域密密麻麻地标着白色色号，这些都是没意义的：

其实上一版也做过透明底的处理，会把透明区域自动识别为空白格，不标色号也不计入用量。但白底图片跟透明还是不太一样，程序把白色背景也当成颜色匹配了。

那怎么解决呢？

不能简单地把所有白色都去掉，因为图案内部可能就有白色的部分。

我在处理的时候用了连通区域的思路，简单来说就是从图片四周边缘出发，用 flood fill 找出所有与边界相连的近白色格子，把它们标记为背景空白。

而图案内部被其他颜色包围的白色格子，正常保留：

这样处理之后，背景就干净了，图案里该有白色的地方还是白色：

同时我还加了一个「忽略白底」的开关，默认开启。万一有人就是想把白色也标出来，关掉就行。

第二个问题是 WebP 格式的图片传不了。

这个功能之前是支持的，但是优化交互的时候我加了个裁剪页，选完图片会强制进裁剪。裁剪页用 canvas 把图片画出来再导出，而微信小程序的 canvas 对 WebP 支持很不稳定，因为getImageInfo 可能拿不到信息，drawImage 可能画不出来。

更坑的是，即使选了保留原图不裁剪，之前的逻辑也会过一遍 canvas 转成 JPG，WebP 照样用不了。

这个问题我前后改了三次才彻底搞定。

首先是用文件路径后缀判断格式，WebP 就跳过裁剪，但微信临时文件经常没有扩展名，导致判断不准。

然后尝试改成读文件头的前几个字节来判断格式，探测到 WebP 就直接走原图流程，不进裁剪页。

但还是会闪一下裁剪页再退回来，因为 getImageInfo 失败时才触发回退，页面已经跳过去了。

最后我把格式探测提前到选图之后、跳转之前。WebP/HEIC 格式直接跳过裁剪，连页面都不进。上传前把临时文件复制一份并加上 .webp 后缀，后端也按文件头纠正扩展名，这样一波处理之后，WebP 格式终于能正常生成图纸了。

这里也给大家一个建议，如果你以后要开发小程序，注意要考虑到图片 API 对 WebP 的支持比较差劲，处理用户上传的图片时建议一开始就按文件头识别格式，不要依赖路径后缀。

这次优化还改了一个参数的默认值，之前颜色数量默认是「不限」，也就是 221 种颜色随便用。

实际拼的时候才发现这不合理，因为221 种颜色意味着你可能要买几十种不同色号的豆子，每种就用几颗，成本和复杂度都很高。

所以我把默认值改成了 48 色。48 色已经能覆盖大部分图案的需要，同时把买豆子的品种控制在合理范围内，如果对效果不满意，再手动调大这个参数就行。

我还在上传的时候增加了一个裁剪页，方便对上传的图片进行微调：

以上就是本次优化的全部内容啦，这次优化的东西不算多，但每个都是大家真实反馈的问题：

如果你也在玩拼豆，欢迎来「松柏工具箱」小程序试试，有问题欢迎反馈给我~

也欢迎关注我，及时获取最新动态：

下期再见，拜拜！👋🏻