這篇文章主要介紹JS如何在瀏覽器中解析Base64編碼圖像，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為許昌企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，許昌網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

瀏覽器對(duì)Base64的支持

圖像是最經(jīng)常被使用的一種二進(jìn)制文件。而現(xiàn)代的瀏覽器的進(jìn)步日新月異，IE7，F(xiàn)ireFox和其他瀏覽器為包括Base64在內(nèi)各種編碼的圖像信息提供了很好的支持。因此圖形信息可以以下面的形式呈現(xiàn)在頁面中、

Java代碼

這種data: URI的格式能把Base64（或其他數(shù)據(jù)）可以內(nèi)嵌在image標(biāo)簽的屬性當(dāng)中（或者CSS中）。我們可以看到在大部分瀏覽器中的顯示效果： 

這種做法有利有弊，好處是瀏覽器可以在一個(gè)連接中得到完成的頁面內(nèi)容，不好的地方時(shí)圖像的大小會(huì)增加1/3。因此，這種內(nèi)嵌的方法適合對(duì)小的圖形元素比如圖標(biāo)、圓角等等進(jìn)行處理，從而減少瀏覽器打開的連接數(shù)，但對(duì)大的照片、圖片（量少而大）等等則不應(yīng)該使用Base64編碼以免影響下載速度。

為了得到剛才的Base64編碼，我們將上一篇的Java修改成Struts Action，并借用了JIMI進(jìn)行圖形的讀取和格式轉(zhuǎn)換，Base64編碼器則改為更普遍的Apache Commons組件，代碼如下：

Java代碼

public class Base64ImageAction extends ActionSupport { 
  private final static String galleryName = "gallery"; 
 private static String parent = null; 
   private String encodeString = null; 
 public String getEncodeString() { 
  return encodeString; 
 } 
 public void setEncodeString(String encodeString) { 
  this.encodeString = encodeString; 
 } 
 private String getImageFullPath() { 
  parent = new File(this.getClass().getClassLoader().getResource( 
     File.separator).getPath()).getParent()+File.separator+"flag.jpg"; 
 } 
 public String execute() { 
  ByteArrayOutputStream output = new ByteArrayOutputStream(); 
  try { 
   JimiReader reader = Jimi.createJimiReader(this.getImageFullPath()); 
   Image image = reader.getImage(); 
   Jimi.putImage("image/png", image, output); 
   output.flush(); 
   output.close(); 
   this.encodeString = Base64.encodeBase64String(output.toByteArray()); 
  } catch (IOException e) { 
   e.printStackTrace(); 
  } catch (JimiException e) { 
   e.printStackTrace(); 
  } 
  return SUCCESS; 
 } 
}

對(duì)應(yīng)的View端是個(gè)十分簡單的Freemarker模板:

Html代碼

處理古代瀏覽器

世界總是不是那么完美，盡管大部分現(xiàn)代瀏覽器對(duì)Base64的處理都十分完善，但是我們不能不考慮到一些“古老”的瀏覽器，而現(xiàn)在還是普遍使用的“古老”的瀏覽器，就當(dāng)屬IE6，在IE6里試圖瀏覽上面的圖片可能會(huì)得到一個(gè)紅叉叉。我們不得不為IE6做一些特殊處理,利用下面的JavaScript,我們把Base64字串傳回服務(wù)器端，重新解析成圖片

Javascript代碼

// a regular expression to test for Base64 data 
var BASE64_DATA = /^data:.*;base64/i; 
// path to the PHP module that will decode the encoded data 
var base64Path = "/my/path/base64.php"; 
function fixBase64(img) { 
 // check the image source 
 if (BASE64_DATA.test(img.src)) { 
 // pass the data to the PHP routine 
 img.src = base64Path + "?" + img.src.slice(5); 
 } 
}; 
// fix images on page load 
onload = function() { 
 for (var i = 0; i < document.images.length; i++) { 
 fixBase64(document.images[i]); 
 } 
};

服務(wù)器端的Struts可以參考上面的例子做反向操作，具體從略。

更完美的方法

將Base64傳回服務(wù)器解碼是不錯(cuò)的IE6補(bǔ)丁，但是違背了我們的初衷，對(duì)IE6來說，瀏覽器連接數(shù)并未有任何減少。更直接的想法，是否能用Javascript直接在瀏覽器中，對(duì)Base64文本進(jìn)行解碼呢？我們構(gòu)思的場景如下：服務(wù)器端先將圖片轉(zhuǎn)換成PNG格式以方便客戶端進(jìn)行處理，Base64編碼之后，利用JSON將文本傳遞給瀏覽器客戶端進(jìn)行處理。

我們選擇PNG圖形格式是因?yàn)镻NG已經(jīng)儼然成為新的Web圖形標(biāo)準(zhǔn)，它格式非常簡單，可以很方便的用javascript進(jìn)行處理而不需要借助瀏覽器的支持。我們知道javascript直接不能處理二進(jìn)制數(shù)據(jù)，但是現(xiàn)在這不是個(gè)問題，服務(wù)器端已經(jīng)準(zhǔn)備好了Base64編碼的文本數(shù)據(jù)，現(xiàn)在我們只需要一個(gè)javascript的Base64解析器，你可以在這里找到一個(gè)notmasteryet的Base64解析器。

現(xiàn)在PNG圖形格式采用了DEFLATE作為唯一的壓縮算法，該算法也廣泛應(yīng)用在ZIP,GZIP等壓縮格式中。PNG圖像格式文件(或者稱為數(shù)據(jù)流)由一個(gè)8字節(jié)的PNG文件署名(PNG file signature)域和按照特定結(jié)構(gòu)組織的3個(gè)以上的數(shù)據(jù)塊(chunk)組成。

PNG定義了兩種類型的數(shù)據(jù)塊，一種是稱為關(guān)鍵數(shù)據(jù)塊(critical chunk)，這是標(biāo)準(zhǔn)的數(shù)據(jù)塊，另一種叫做輔助數(shù)據(jù)塊(ancillary chunks)，這是可選的數(shù)據(jù)塊。關(guān)鍵數(shù)據(jù)塊定義了4個(gè)標(biāo)準(zhǔn)數(shù)據(jù)塊，其中圖像數(shù)據(jù)塊IDAT(image data chunk)：它存儲(chǔ)實(shí)際的數(shù)據(jù), PNG總的數(shù)據(jù)流采用DEFLAT進(jìn)行壓縮。此外還擦用三角過濾“delta filters”來過濾每一行的像素的未壓縮數(shù)據(jù)。DEFLAT和delta壓縮在其他數(shù)據(jù)和文本處理中也被廣泛應(yīng)用。PNG格式你可以參考官方文檔。

很棒的，notmasteryet也為我們提供了一個(gè)DEFLAT解壓器。

最后，我們把這些組合起來:

Html代碼

 
 
 
  
  
 
 
 
 
 
var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......數(shù)據(jù)從略......55CYII='; 
String.prototype.padRight = function(c, n){ 
 var txt = ''; 
 for(var i=0;i