JS檔案壓縮成PNG映像儲存方法_PHP教程

你有沒有想過：為了壓縮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寫的壓縮檔的方法：

它讀取JS檔案並建立一個PNG映像，映像中的每個像素中是一個0-255之間的值，而這個值對應的是JS字元的ascII的值。
 
當然，除了壓縮，還要有解壓縮，也就是將映像讀取為JS檔案的過程。這個函數是用JS寫的，具體代碼如下：
function loadPNGData(strFilename,fncCallback){    var bCanvas=false;      var oCanvas=document.createElement("canvas");      if(oCanvas.getContext){        var oCtx=oCanvas.getContext("2d");          if(oCtx.getImageData){            bCanvas=true;          }      }      if(bCanvas){        var oImg=new Image();          oImg.style.position="absolute";          oImg.style.left="-10000px";          document.body.appendChild(oImg);          oImg.onload=function(){            var iWidth=this.offsetWidth;              var iHeight=this.offsetHeight;              oCanvas.width=iWidth;              oCanvas.height=iHeight;              oCanvas.style.width=iWidth+"px";              oCanvas.style.height=iHeight+"px";              var oText=document.getElementById("output");              oCtx.drawImage(this,0,0);              var oData=oCtx.getImageData(0,0,iWidth,iHeight).data;              var a=[];              var len=oData.length;              var p=-1;              for(var i=0;i 0)                      a[++p]=String.fromCharCode(oData[i]);              };              var strData=a.join("");              if(fncCallback){                fncCallback(strData);              }              document.body.removeChild(oImg);          }          oImg.src=strFilename;          return true;      } else{        return false;      }  }
最後給出線上測試地址，在這個網頁上，您可以在列表中選擇一個PNG影像檔，點擊 load file 按鈕可以在網頁上看到這個映像，在映像的下面是由這個映像所讀出來的代碼檔案。
http://www.nihilogic.dk/labs/canvascompress/
您可能感興趣的文章
 

  
linux chmod(檔案或檔案夾許可權設定)命令參數及用法詳解
  
php實現將檔案批量壓縮打包下載
  
php用ZipArchive函數實現檔案的壓縮與解壓縮
  
Smarty臨時檔案建立失敗的解決辦法
  
php判斷遠程檔案是否存在的辦法
  
php擷取目錄所有檔案並將結果儲存到數組的程式
  
JS擷取按鍵的代碼，Js如何屏蔽使用者的按鍵，Js擷取使用者按鍵對應的ASII碼（相容所有瀏覽器）
  
Js地址欄特效（顯示頁面內所有加連結的圖片的大小和查看當前的瀏覽器的高度）
 
http://www.bkjia.com/PHPjc/764125.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/764125.htmlTechArticle你有沒有想過：為了壓縮js檔案，把js檔案轉化成PNG映像，然後用 canvas 控制項中的 getImageData() 函數將映像再重新讀成js檔案。我昨天在這裡發...
