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