一直以來，網頁開發(fā)對優(yōu)化方面做的工作從未停止。網頁無圖也是為了減少頁面資源請求而提出的一種暢想。無可厚非在網頁開發(fā)的歷程中在網頁無圖方面我們已經取得了不朽的成就：從一開始零零碎碎的小圖標資源，到后來小圖標合并成一個圖片出現雪碧圖，再到后來Webfont的出現不僅可以取代雪碧圖，而且徹底解決了圖標管理難，變色實現麻煩的問題。今天我要跟大家介紹一個小工具，也是可以幫助實現網頁無圖這一終極目標。理論上來講，它可以將任何一張圖片轉換成一個不帶圖片，不帶背景圖的干干凈凈的html標簽。但是這有前提：你的計算機得有足夠的資源去支撐。

　　緣起

　　那是一個工作日的早上，我向往常一樣準時到達了工作崗位上，啟動電腦，打開瀏覽器我偶然發(fā)現了一篇名曰《18個你可能不相信是用CSS制作出來的東西》的文章，出于職業(yè)敏感，也出于好奇我就點進去看了一看，發(fā)現其中有一個很有意思的作品：http://codepen.io/HugoGiraudel/full/gpcwa/，它僅僅用一個div標簽就完成了這幅作品，于是我們幾個同事好奇使然，開始分析它的實現，漸漸有了下面即將介紹的工具的影子。

　　漸入主題

　　既然可以使用一個標簽制作出一副精美的像素圖，那么是否就意味著可以用一個標簽還原任一一張圖片?唯一不能還原的是圖片的精細度問題。然而，如果可以精細到每一個像素點，那么高精度的還原整張圖也完全可行，只是這必將消耗非常多的計算機資源。這一設想便是催生這個小工具的催化劑，于是我便開始構思起來。

　　案例分析

　　通過使用開發(fā)者工具分析以上案例的源碼，我發(fā)現其實它的實現并不難。我們知道在CSS3中新增了一個設置盒子陰影的box-shadow屬性，而這個屬性可以同時設置任意多個不同顏色和擴散度的陰影塊，而案例正是完美的詮釋了這個新屬性。

　　既然如此，那么我們現在來做個試驗，我們在任一一張圖上覆蓋上一個個大小相同的小方格子，我們就可以將任何一張圖片分隔成一個個的小方格，我們只要知道這些小方格的大小、順序和位置，我們就可以重組這張圖片，如下對比圖所示：

　　但是，有個問題：box-shadow的引用顏色是單色的，而每個盒子范圍內的圖案是復雜的，我們如何去處理這個問題?

　　因為box-shadow只能設置顏色，所以這個問題的結果只有一個，找出一個能代表這個格子的顏色，那么選取哪一個顏色值就因人而異了，可以選格子四角的任意一個、可選中心點，可選格子內的任意一個點，我選擇的是格子的左上角這個點。我們不難發(fā)現，如果我們盡可能的縮小格子，小到只剩下一個像素大小，我們就可以完整的還原一張圖片了。

　　技術實現

　　首先，我們考慮如何根據圖片去取到每個格子的顏色值?這個問題并不難，HTML5為我們提供了Canvas標簽，而通過Canvas我們可以使用getImageData方法獲取到畫布中任一一個點的顏色信息以及透明度信息。

　　然后，我們來考慮如何設計我們的小工具。第一步，根據不同的圖片可能會適合不同的格子大小，所以我會保留一個size選項用于設置盒子的大小;第二步，格子與格子之間是否保留間隙，可能根據用戶習慣會有不同，所以我提供space選項來設置間隙大小;第三步，格子實際就是一個盒子的其中一個陰影，而陰影的形狀是可以根據盒子本身發(fā)生變化的，所以我提供radius屬性來配置格子圓角大小;最后，既然我們得到的將是一個html標簽，那么標簽是可以帶有各種屬性的(比如：id、class等)，所以我提供一個attrs屬性(一個json對象)，來設置生成的html元素的屬性。好了，萬事俱備，只欠代碼實現了!

　　最后，我們梳理邏輯，封裝代碼，完成了最基礎的版本。效果如下演示：

　　為了方便大家看到更真實的效果，這里給大家提供在線DEMO

　　總結

　　從功能上來看，我實現了圖片到html元素的轉換，但是可能并非是最好的網頁無圖實現方案，因為工具轉換出的HTML標簽，設置了太多的陰影塊，對瀏覽器的渲染并不友好，會對用戶計算機硬件有一定的要求，特別是塊大小為1(即完整還原圖片)的時候，轉換過程非常緩慢，如果圖片再大些，極有可能導致用戶瀏覽器崩潰，因此建議大家測試時慎用大圖做測試。而且，轉換后得到的html標簽和樣式字符串大小將有可能遠遠超過圖片本身的大小，所以我只能說這是一種可行的技術方案，但未必是好的實現方案。(然并卵)

　　文章轉載自百碼山莊的《【原創(chuàng)】網頁無圖再不是夢想》