html5 - css.v2bo.com这个在线css sprite工具自动识别原理是怎样的？

Question

无意中发现了http://css.v2bo.com这个在线的css sprite工具，试用了一下那个“示例”，发现它能自动框选图标，自动绕开透明区域，感觉非常神奇，但是代码经过压缩了的，不知道怎么实现的，有前端大神解释一下原理吗？

Answer 1

具体算法猜不出，但基本原理应该不难呢。

canvas可以得到图片的某一点上的颜色值，自然也可以得到透明度，有这个基础随便怎么玩都行了。

抛砖引玉下：
1、依次对每条边的像素进行检查，有不透明的就扩展那条边，继续检查直到这条边没有不透明像素为止
2、重复上面步骤直到所有边都没有不透明像素为止（后面边的调整可能会影响到前面边的长度）
3、至此，选中的图形一定全部在这个框内了，或者说根本什么都没选中。。。
4、收缩选框的四条边，跟1、2同理，改成有透明像素就收缩那条边，若干次重复后所有边都紧贴选中图形/或者选框面积为0，就是没选中任何东西

可能的优化：
对第1步：找到第一个不透明像素后，后续的检查就在它附近为起点，不透明像素大部分是扎堆出现的。
对第2步：1、2步只扩展不搜索，所以第二次检查某条边是可以保证即使这条边长度（覆盖的像素点）变了，也只加不减，只要检查增长的部分就行了。（选框很大时可能会有点用吧。。。）

没学过计算机图形学，不过直觉上上面的算法应该也是能接受的。

Answer 2

好学好用github
spriteCow