1. 程式人生 > >前端將圖片二進位制流顯示在html端

前端將圖片二進位制流顯示在html端

工作中碰到的問題,在處理介面返回的驗證碼圖片時,由於返回的是encode編碼程式碼,在js端獲取到資料之後,通過函式encodeURI()來進行解碼,之後可以通過在src中設定來實現圖片顯示:

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAIAAAC6iKlyAAAFL0lEQVR42u3Zb2hXVRgH8EsbGoNe%0D%0ABJWmKeGcL1TajKGbmlGjjAWDRstQ7IWoc%2BALw6SgF669iWqRYKUuCWJtGDrDSCgkN6SUEnHG1PbC%0D%0AgVgJib5okkZ%2F7IEnHp7Ouee5zzn33LsJHb778dv9nXt%2Fd5%2Ffw3PP%2FS25dduO6rH%2Bp4%2F9UeY7ftva%0D%0AjAnYN4Gfrp0vQm5H65Kh84gn9Ay5MSvrL1AmrfLiXRsAGh6NNOzrN7ZMyOl98MwUCD7%2F%2FLXLSeok%0D%0AEofnHL04%2BrXDVa1nTsMjJH9Fg3Xq9g0...">

實現方法:

在src前新增data:image/jpeg;base64,+已經encode的二進位制程式碼,就可以在網頁端顯示出圖片,效果如圖:


不過這麼長串的二進位制字元直接展示在html裡實在不是上上之選,希望有條件的話可以讓後臺進行轉碼,直接獲取src地址才是相對友好的方法。