一直以來，網頁開發對優化方面做的工作從未停止。網頁無圖也是為了減少頁面資源請求而提出的一種暢想。無可厚非在網頁開發的歷程中在網頁無圖方面我們已經取得了不朽的成就：從一開始零零碎碎的小圖標資源，到后來小圖標合并成一個圖片出現雪碧圖，再到后來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標簽和樣式字符串大小將有可能遠遠超過圖片本身的大小，所以我只能說這是一種可行的技術方案，但未必是好的實現方案。(然并卵)

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