网页无图再不是梦想

　　缘起

　　那是一个工作日的早上，我向往常一样准时到达了工作岗位上，启动电脑，打开浏览器我偶然发现了一篇名曰《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标签和样式字符串大小将有可能远远超过图片本身的大小，所以我只能说这是一种可行的技术方案，但未必是好的实现方案。(然并卵)

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