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

Question

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

Answer 1

I can’t guess the specific algorithm, but the basic principle shouldn’t be difficult.

Canvas can get the color value at a certain point of the picture, and naturally it can also get the transparency. With this foundation, you can play whatever you want.

Tell me something about it:
1. Check the pixels on each side in turn. If there is opacity, extend that side. Continue checking until there are no opaque pixels on this side
2. Repeat the above steps until there are no opaque pixels on all sides (adjustment of the later sides may affect the length of the front sides)
3. At this point, all the selected graphics must be in this box, or nothing is selected at all. . .
4. Shrink the four sides of the selection box. Same as 1 and 2. If there are transparent pixels, shrink that side. After several repetitions, all sides will be close to the selected graphic/or the area of ​​the selection box will be 0, which means nothing is selected. Stuff

Possible optimizations:
For step 1: After finding the first opaque pixel, subsequent checks will start near it. Most of the opaque pixels appear in clusters.
For step 2: steps 1 and 2 only expand and do not search, so the second check of an edge can ensure that even if the length of this edge (covered pixels) changes, it will only be added and not subtracted, as long as the growing part is checked That's it. (It may be useful when the selection box is large...)

I have never studied computer graphics, but intuitively the above algorithm should be acceptable.

Answer 2

Easy to learn and easy to use github
spriteCow