bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

JS如何在瀏覽器中解析Base64編碼圖像-創新互聯

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

創新互聯建站長期為1000+客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為許昌企業提供專業的網站建設、成都網站設計，許昌網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發。

瀏覽器對Base64的支持

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

Java代碼

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM///// 
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML 
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==" 
alt="Base64 encoded image" width="150" height="150"/>

這種data: URI的格式能把Base64（或其他數據）可以內嵌在image標簽的屬性當中（或者CSS中）。我們可以看到在大部分瀏覽器中的顯示效果： 

JS如何在瀏覽器中解析Base64編碼圖像

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

為了得到剛才的Base64編碼，我們將上一篇的Java修改成Struts Action，并借用了JIMI進行圖形的讀取和格式轉換，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; 
 } 
}

對應的View端是個十分簡單的Freemarker模板:

Html代碼

<html> 
<head> 
<title>Hello,World</title> 
</head> 
<body> 
<img src="data:image/png;base64,${encodeString}" /> 
</body> 
</html>

處理古代瀏覽器

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

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]); 
 } 
};

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

更完美的方法

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

我們選擇PNG圖形格式是因為PNG已經儼然成為新的Web圖形標準，它格式非常簡單，可以很方便的用javascript進行處理而不需要借助瀏覽器的支持。我們知道javascript直接不能處理二進制數據，但是現在這不是個問題，服務器端已經準備好了Base64編碼的文本數據，現在我們只需要一個javascript的Base64解析器，你可以在這里找到一個notmasteryet的Base64解析器。

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

PNG定義了兩種類型的數據塊，一種是稱為關鍵數據塊(critical chunk)，這是標準的數據塊，另一種叫做輔助數據塊(ancillary chunks)，這是可選的數據塊。關鍵數據塊定義了4個標準數據塊，其中圖像數據塊IDAT(image data chunk)：它存儲實際的數據, PNG總的數據流采用DEFLAT進行壓縮。此外還擦用三角過濾“delta filters”來過濾每一行的像素的未壓縮數據。DEFLAT和delta壓縮在其他數據和文本處理中也被廣泛應用。PNG格式你可以參考<a href="http://www.libpng.org/pub/png/spec/1.1/PNG-Contents.html">官方文檔</a>。

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

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

Html代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title>Demo JavaScript PNG Viewer</title> 
 </head> 
<body onload="show(gravatar);"> 
<script src="../Source/Base64.js" type="text/javascript"></script> 
<script src="../Source/Deflate.js" type="text/javascript"></script> 
<script src="../Source/PNG.js" type="text/javascript"></script> 
<script type="text/javascript"> 
var gravatar = 'iVBORw0KGgoAAAANSUhEUgAAA.......數據從略......55CYII='; 
String.prototype.padRight = function(c, n){ 
 var txt = ''; 
 for(var i=0;i<n-this.length;i++) txt += c; 
 return txt + this; 
}; 
function show(data){ 
 var png = new PNG(data); 
 var img = document.getElementById('image'), limg = document.getElementById('largeimage'); 
 document.getElementById('nativeimage').src = 'data:image/png;base64,' + data; 
 img.innerHTML = ''; 
 limg.innerHTML = ''; 
 img.style.width = png.width + 'px'; 
 img.style.height = png.height + 'px'; 
 limg.style.width = (png.width * 3) + 'px'; 
 limg.style.width = (png.height * 3) + 'px'; 
 var line; 
 while(line = png.readLine()) 
 { 
  for (var x = 0; x < line.length; x++){ 
   var px = document.createElement('div'), px2 = document.createElement('div'); 
   px.className = px2.className = 'pixel'; 
   px.style.backgroundColor = px2.style.backgroundColor = '#' + line[x].toString(16).padRight('0', 6); 
   img.appendChild(px); 
   limg.appendChild(px2); 
  } 
 } 
} 
</script> 
<div id="image"></div> 
<div id="largeimage"></div> 
<img id="nativeimage" /> 
</body> 
</html>

以上是“JS如何在瀏覽器中解析Base64編碼圖像”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯網站建設公司行業資訊頻道！

另外有需要云服務器可以了解下創新互聯建站vcdvsql.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁標題：JS如何在瀏覽器中解析Base64編碼圖像-創新互聯
文章源于：http://vcdvsql.cn/article46/cecjhg.html

成都網站建設公司_創新互聯，為您提供微信小程序、搜索引擎優化、網站建設、外貿建站、外貿網站建設、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

商城網站建設