你想不到的壓縮方法：將javascript檔案壓縮成PNG映像儲存

你有沒有想過：為了壓縮js檔案，把js檔案轉化成PNG映像，然後用 canvas 控制項中的 getImageData() 函數將映像再重新讀成js檔案。我昨天在這裡發表的JS檔案快速載入的文章中提到了這一方法，有網友對這個做法高度興趣，於是今天詳細解讀一下。

這樣可以做到很高的壓縮比，到底有多高，下面會提到。這種方法用到了 canvas 控制項，這也意味著只有支援 canvas 控制項的瀏覽器下才有效。

現在你可以看到，上面的映像類似一個雜訊映像，但它實際上是一個由124K的 prototype 架構代碼轉化成的30K的8位PNG映像（壓縮比還不錯吧）。

其實，要將代碼轉化為映像的格式儲存，可以轉化成GIF和PNG格式。PNG格式的映像有24位和8位，用24位的RGB映像，每個像素可以儲存3位元組的資料，如果是用8位的RGB映像，每個像素可以儲存1位元組的資料。

在PHOTOSHOP中做測試發現：一個300x100的純色雜點8位元影像像可以壓縮到5K，而同樣的純色雜點映像，如果是100x100的24位元影像像只能壓縮到20K。如果是同樣圖案的8位GIF映像，壓縮效果比PNG要差一些。所以，我們選擇用8位的PNG映像作為壓縮和解壓縮的儲存格式。

現在，我們就需要開始壓縮映像了，下面是用PHP寫的壓縮檔地址。
http://www.cleanthem.com/code/20120620/js-to-png.txt

它讀取JS檔案並建立一個PNG映像，映像中的每個像素中是一個0-255之間的值，而這個值對應的是JS字元的ascII的值。

當然，除了壓縮，還要有解壓縮，也就是將映像讀取為JS檔案的過程。這個函數是用JS寫的，可以從下面的位置下載這個檔案。
http://www.cleanthem.com/code/20120620/pngdata.txt

最後給出線上測試地址，在這個網頁上，您可以在列表中選擇一個PNG影像檔，點擊 load file 按鈕可以在網頁上看到這個映像，在映像的下面是由這個映像所讀出來的代碼檔案。

http://www.nihilogic.dk/labs/canvascompress/

 

註：轉載請註明出處，覺得有用就推薦一下吧~