使用base64對圖片的二進制進行編碼，使其能夠利用ajax進行顯示

時間 2019-11-12

標籤使用 base64 base 圖片二進制進行編碼使其能夠利用 ajax 顯示欄目字符編碼简体版

原文原文鏈接

有時候咱們須要動態的將圖片的二進制在頁面上進行顯示，如咱們須要弄一個驗證碼的功能，那麼若是咱們的驗證碼的圖片在後臺獲得的是該圖片的二進制，那麼當咱們須要在頁面上點擊一個按鈕利用ajax進行切換的時候，若是在後臺直接返回的是該圖片的二進制，那麼該圖片是沒法進行顯示的。javascript

直接返回字節流給img標籤的src是能夠的，如<img src="servlet/CheckCode">，但在以後進行切換的時候使用ajax請求，若是僅僅返回圖片的二進制而後把它傳給img的src是不能的，目前的方法是把圖片的二進制進行base64編碼，而後在頁面上如下列方式進行顯示，<img src="data:image/jpeg;base64,result">,其中的result是通過 base64編碼後的內容，這樣就能夠使用後臺直接利用圖片的二進制進行圖片的顯示了css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>code.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    	$(function() {
    		
    		init();
    	
    		$("[type='button']").click(function() {
    			$.post("servlet/CheckCode",{},function(data) {
    				//注意這裏src的寫法，data是通過base64編碼後的內容
    				$("img").attr("src","data:image/jpeg;base64,"+data);
    			});
    		});
    		
    	});
    	function init() {
    		$.post("servlet/CheckCode",{},function(data) {
    			//其實在第一次運行的時候是能夠直接將圖片的二進制做爲Image的src進行顯示的，可是由於後臺統一返回的是
    			//通過base64編碼事後的內容，因此這裏初始顯示的時候也是利用base64的方法
   				$("img").attr("src","data:image/jpeg;base64,"+data);
   			});
    	}
    </script>

  </head>
  
  <body>
    <img alt="" width=100 >
    <input type="button" value="換一張"/>
  </body>
</html>

轉自：http://haohaoxuexi.iteye.com/blog/1084080html