使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示

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

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

使用base64對(duì)圖片的二進(jìn)制進(jìn)行編碼并用ajax進(jìn)行顯示

有時(shí)候我們需要?jiǎng)討B(tài)的將圖片的二進(jìn)制在頁(yè)面上進(jìn)行顯示，如我們需要弄一個(gè)驗(yàn)證碼的功能，那么如果我們的驗(yàn)證碼的圖片在后臺(tái)得到的是該圖片的二進(jìn)制，那么當(dāng)我們需要在頁(yè)面上點(diǎn)擊一個(gè)按鈕利用ajax進(jìn)行切換的時(shí)候，如果在后臺(tái)直接返回的是該圖片的二進(jìn)制，那么該圖片是無(wú)法進(jìn)行顯示的。

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

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

實(shí)例代碼：

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

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

您可能感興趣的文章:

相關(guān)文章

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