网页无图再不是梦想

　　一直以来，网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就：从一开始零零碎碎的小图标资源，到后来小图标合并成一个图片出现雪碧图，再到后来Webfont的出现不仅可以取代雪碧图，而且彻底解决了图标管理难，变色实现麻烦的问题。今天我要跟大家介绍一个小工具，也是可以帮助实现网页无图这一终极目标。理论上来讲，它可以将任何一张图片转换成一个不带图片，不带背景图的干干净净的html标签。但是这有前提：你的计算机得有足够的资源去支撑。

 

　　缘起

 

　　那是一个工作日的早上，我向往常一样准时到达了工作岗位上，启动电脑，打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章，出于职业敏感，也出于好奇我就点进去看了一看，发现其中有一个很有意思的作品：http://codepen.io/HugoGiraudel/full/gpcwa/，它仅仅用一个div标签就完成了这幅作品，于是我们几个同事好奇使然，开始分析它的实现，渐渐有了下面即将介绍的工具的影子。

 

　　渐入主题

 

　　既然可以使用一个标签制作出一副精美的像素图，那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而，如果可以精细到每一个像素点，那么高精度的还原整张图也完全可行，只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂，于是我便开始构思起来。

 

　　案例分析

 

　　通过使用开发者工具分析以上案例的源码，我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性，而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块，而案例正是完美的诠释了这个新属性。

 

　　既然如此，那么我们现在来做个试验，我们在任一一张图上覆盖上一个个大小相同的小方格子，我们就可以将任何一张图片分隔成一个个的小方格，我们只要知道这些小方格的大小、顺序和位置，我们就可以重组这张图片，如下对比图所示：

 

 

　　但是，有个问题：box-shadow的引用颜色是单色的，而每个盒子范围内的图案是复杂的，我们如何去处理这个问题?

 

　　因为box-shadow只能设置颜色，所以这个问题的结果只有一个，找出一个能代表这个格子的颜色，那么选取哪一个颜色值就因人而异了，可以选格子四角的任意一个、可选中心点，可选格子内的任意一个点，我选择的是格子的左上角这个点。我们不难发现，如果我们尽可能的缩小格子，小到只剩下一个像素大小，我们就可以完整的还原一张图片了。

 

　　技术实现

 

　　首先，我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难，HTML5为我们提供了Canvas标签，而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

 

　　然后，我们来考虑如何设计我们的小工具。第一步，根据不同的图片可能会适合不同的格子大小，所以我会保留一个size选项用于设置盒子的大小;第二步，格子与格子之间是否保留间隙，可能根据用户习惯会有不同，所以我提供space选项来设置间隙大小;第三步，格子实际就是一个盒子的其中一个阴影，而阴影的形状是可以根据盒子本身发生变化的，所以我提供radius属性来配置格子圆角大小;最后，既然我们得到的将是一个html标签，那么标签是可以带有各种属性的(比如：id、class等)，所以我提供一个attrs属性(一个json对象)，来设置生成的html元素的属性。好了，万事俱备，只欠代码实现了!

 

　　最后，我们梳理逻辑，封装代码，完成了最基础的版本。效果如下演示：

 

　　为了方便大家看到更真实的效果，这里给大家提供在线DEMO

 

　　总结

 

　　从功能上来看，我实现了图片到html元素的转换，但是可能并非是最好的网页无图实现方案，因为工具转换出的HTML标签，设置了太多的阴影块，对浏览器的渲染并不友好，会对用户计算机硬件有一定的要求，特别是块大小为1(即完整还原图片)的时候，转换过程非常缓慢，如果图片再大些，极有可能导致用户浏览器崩溃，因此建议大家测试时慎用大图做测试。而且，转换后得到的html标签和样式字符串大小将有可能远远超过图片本身的大小，所以我只能说这是一种可行的技术方案，但未必是好的实现方案。(然并卵)

 

　　文章转载自百码山庄的《【原创】网页无图再不是梦想》