使用base64對圖片的二進制進行編碼并用ajax進行顯示

更新時間：2017年01月03日 16:52:15 投稿：lqh

這篇文章主要介紹了使用base64對圖片的二進制進行編碼并用ajax進行顯示的相關資料,需要的朋友可以參考下

使用base64對圖片的二進制進行編碼并用ajax進行顯示

有時候我們需要動態(tài)的將圖片的二進制在頁面上進行顯示，如我們需要弄一個驗證碼的功能，那么如果我們的驗證碼的圖片在后臺得到的是該圖片的二進制，那么當我們需要在頁面上點擊一個按鈕利用ajax進行切換的時候，如果在后臺直接返回的是該圖片的二進制，那么該圖片是無法進行顯示的。

直接返回字節(jié)流給img標簽的src是可以的，如<img src="servlet/CheckCode">，但在之后進行切換的時候使用ajax請求，如果僅僅返回圖片的二進制然后把它傳給img的src是不能的，目前的方法是把圖片的二進制進行base64編碼，

然后在頁面上以下列方式進行顯示，<img src="data:image/jpeg;base64,result">,其中的result是經(jīng)過base64編碼后的內(nèi)容，這樣就可以使用后臺直接利用圖片的二進制進行圖片的顯示了

實例代碼：

<!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是經(jīng)過base64編碼后的內(nèi)容
    $("img").attr("src","data:image/jpeg;base64,"+data);
    });
   });
   
   });
   function init() {
   $.post("servlet/CheckCode",{},function(data) {
    //其實在第一次運行的時候是可以直接將圖片的二進制作為Image的src進行顯示的，但是因為后臺統(tǒng)一返回的是
    //經(jīng)過base64編碼過后的內(nèi)容，所以這里初始顯示的時候也是利用base64的方法
    $("img").attr("src","data:image/jpeg;base64,"+data);
   });
   }
  </script>

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

您可能感興趣的文章:

ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能示例
這篇文章主要介紹了ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能,結合實例形式分析了ES5 模擬 ES6 的 Symbol 實現(xiàn)私有成員功能相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下
2020-05-05
JavaScript Perfection kill 測試及答案
近日，在Perfection kill上看到有關javascript quiz。并做了一下，最終錯了2個（#2，#9），但是，這2道題，在Ie和ff下的答案是不一樣的？！
2010-03-03
Vuex模塊化應用實踐示例
這篇文章主要介紹了Vuex模塊化應用實踐示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-02-02
原生js實現(xiàn)頁面滾動動畫
這篇文章主要為大家詳細介紹了原生js實現(xiàn)頁面滾動動畫，使用了requestAnimationFrame，文中示例代碼介紹的非常詳細，具有一定的參考價值，感為興趣的小伙伴們可以參考一下
2022-01-01
指定區(qū)域的圖片自動按比例縮小的js代碼（防止頁面被圖片撐破）
有時候我們更新的內(nèi)容，有很多的大圖片，就會導致頁面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個補充
2014-02-02
es6學習之解構時應該注意的點
解構賦值允許你使用類似數(shù)組或對象字面量的語法將數(shù)組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統(tǒng)的屬性訪問方法更為清晰，下面這篇文章主要給大家介紹了關于在es6解構時應該注意的點，需要的朋友可以參考下。
2017-08-08
微信小程序之小豆瓣圖書實例
本篇文章主要介紹了微信小程序之小豆瓣圖書實例，具有一定的參考價值，有興趣的同學可以了解一下。
2016-11-11
firefox火狐瀏覽器與與ie兼容的2個問題總結
這幾天遇到幾個頭疼的火狐與ie兼容問題整理下來，希望對需要的朋友有所幫助。
2010-07-07
JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法
這篇文章主要介紹了JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法,涉及JavaScript針對頁面寬高的動態(tài)獲取與元素樣式動態(tài)運算的相關技巧,需要的朋友可以參考下
2016-02-02
JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸
這篇文章主要介紹了JS跨域之window.name實現(xiàn)的跨域數(shù)據(jù)傳輸,需要的朋友可以參考下
2022-01-01