前端處理後端接口傳遞過來的圖片文件

背景

在以前，歷來都是後端返一個圖片地址，而後前端直接使用。 那若是後端返了一個圖片文件過來，那要怎麼作？

---

參考：

vue axios請求圖片流文件前端頁面顯示處理方法

background url base64

js動態建立樣式: style 和 link

---

正文

此次我接收到的直接是一個圖片文件，而後亂碼了。。 以下圖

要怎麼處理呢？

首先是第一步，請求處理，下面我分別列出了axios、fetch、jq、原生js的處理方式

1.修改請求

1.1. axios

重點在於添加option: responseType: 'arraybuffer'

let url = `imgurl`;
    axios.get(url,{responseType: 'arraybuffer'}).then(function(data){
      console.log(data);
    }).catch(function(err){
      error(err)
    });
複製代碼

1.2. fetch

咱們在使用fetch的時候，會有一個response的對象處理過程。 廣泛咱們都是使用的 response.json(),但此次咱們須要進行response.arrayBuffer()處理

fetch(url)
    .then(function(response) {
        if(response.ok) {
            return response.arrayBuffer();  // 這一行是關鍵
        }
        throw new Error('Network response was not ok.');
    })
    .then(function(data) { 
        console.log(data)
    })
    .catch(function(error) {
        
    });
複製代碼

1.3. JQ-ajax

若是使用jq封裝的ajax，那麼抱歉，這個功能用不了。

jq封裝的ajax是基於xhr初版本的，而ArrayBuffer是基於xhr第二版本的

這種狀況就推薦使用原生js來寫

1.4. 原生js

let xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'arraybuffer'; // 重點
    let that = this; // 這個不是必須，只是用來保存this的指向
    xhr.onload = function(e) {
        if (this.status == 200) {
            let result = this.response;
            console.log(result)
       }
    };

xhr.send();
複製代碼

補充知識點

responseType設置的是啥？ arraybuffer又是啥？

這些內容估計又能夠開一篇文章來寫了，詳細的能夠參考如下網址：

MDN-XMLHttpRequest.responseType

阮一峯-二進制數組

2.處理返回值

好了，咱們如今已經獲取到了咱們須要的二進制數組(arrayBuffer) 下一步，咱們要把圖片顯示處理，使用base64編碼便可

let imgUrl = 'data:image/png;base64,' + btoa(new Uint8Array(data.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
// 這裏若是不清楚 new Uint8Array(data.data) 中data的指代，就看看最上面的那個圖
複製代碼

這樣能將圖片進行編碼，而後作前端緩存(若是用localStorage緩存blob，存能成功，可是刷新後再取出來是看不見圖片的)。

解釋一下各自含義：

data: ----獲取數據類型名稱

image/png; -----指數據類型名稱

base64 -----指編碼模式

AAAAA ------指編碼之後的結果。

3.使用

2種方法：

1. 若是使用vue這類框架，能夠直接style賦值
2. 建立動態style，建立動態css

第一個這個使用就不說了，直接src=imgUrl;

//vue
<img :src="imgUrl">
複製代碼

第二個咱們要作的就是建立style節點，並添加在head種

if(document.all){ // document.createStyleSheet(url)
    window.style=`.imga{background-img: url(${imgUrl});`; 
    document.createStyleSheet("javascript:style"); 
}else{ //document.createElement(style)
    var style = document.createElement('style'); 
    style.type = 'text/css'; 
    style.innerHTML=`.imga{background-img: url(${imgUrl});`; 
    document.getElementsByTagName('HEAD').item(0).appendChild(style); 
} 
複製代碼

這樣，就動態建立了相應的style樣式。 而後給須要的地方添加上 .img 便可

...
<div class="imga">
    ...
</div ... 複製代碼