后端返回各種圖片形式在前端的轉(zhuǎn)換及展示方法對比

更新時間：2023年06月13日 09:43:30 作者：鯨洛洛

這篇文章主要給大家介紹了關(guān)于后端返回各種圖片形式在前端的轉(zhuǎn)換及展示方法對比的相關(guān)資料,文中通過圖文介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友可以參考下

一、接口返回的圖片顯示如下所示：

（在控制臺看的）返回的是這個圖片（二進制）

可是，在打印的時候，返回的卻是

出現(xiàn)問題的原因的axios 默認返回的是 json 文本形式，二進制圖片數(shù)據(jù)被強制轉(zhuǎn)換成了 json 文本形式。

找到了原因，解決方案就好辦了。我們在 axios 里面，responseType 默認返回數(shù)據(jù)類型是 json，將其改為返回數(shù)據(jù)類型 blob。下面代碼是正常的圖片顯示，若是接口返回的圖片要回顯到 van-uploader里面，參考 van-uplaoder保存文件到后端，回顯后端接口返回的數(shù)據(jù)

axios({
     method: 'get',
     url: 'XXXXX',
      headers: {
                   'xxx': xxxx,  //需要token的借鑒
            },
       responseType: 'arraybuffer',
})
       .then(res => {                 
             let url=window.URL.createObjectURL(new Blob([res.data], { type: 'image/png' })),
              //直接把url賦值給img的src
       })
        .catch(err => {
               reject(err.data)
          })

二、url、base64、blob，三者之間轉(zhuǎn)化

1.url 轉(zhuǎn) base64

原理：利用canvas.toDataURL的API轉(zhuǎn)化成base64

function urlToBase64(url) {
      return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
          let canvas = document.createElement('canvas');
          canvas.width = this.naturalWidth;
          canvas.height = this.naturalHeight;
          // 將圖片插入畫布并開始繪制
          canvas.getContext('2d').drawImage(image, 0, 0);
          // result
          let result = canvas.toDataURL('image/png')
          resolve(result);
        };
        // CORS 策略，會存在跨域問題https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        // 圖片加載失敗的錯誤處理
        image.onerror = () => {
          reject(new Error('urlToBase64 error'));
      };
    }

調(diào)用

let imgUrL = `http://XXX.jpg`
urlToBase64(imgUrL).then(res => {
  // 轉(zhuǎn)化后的base64圖片地址
  console.log('base64', res)
})

2.base64 轉(zhuǎn) blob

原理：利用URL.createObjectURL為blob對象創(chuàng)建臨時的URL

function base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
  return new Promise((resolve, reject) => {
    // 使用 atob() 方法將數(shù)據(jù)解碼
    let byteCharacters = atob(b64data);
    let byteArrays = [];
    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      let slice = byteCharacters.slice(offset, offset + sliceSize);
      let byteNumbers = [];
      for (let i = 0; i < slice.length; i++) {
          byteNumbers.push(slice.charCodeAt(i));
      }
      // 8 位無符號整數(shù)值的類型化數(shù)組。內(nèi)容將初始化為 0。
      // 如果無法分配請求數(shù)目的字節(jié)，則將引發(fā)異常。
      byteArrays.push(new Uint8Array(byteNumbers));
    }
    let result = new Blob(byteArrays, {
      type: contentType
    })
    result = Object.assign(result,{
      // 這里一定要處理一下 URL.createObjectURL
      preview: URL.createObjectURL(result),
      name: `XXX.png`
    });
    resolve(result)
  })
 }

調(diào)用

let base64 = base64.split(',')[1]
base64ToBlob({b64data: base64, contentType: 'image/png'}).then(res => {
  // 轉(zhuǎn)后后的blob對象
  console.log('blob', res)
})

3.blob 轉(zhuǎn) base64

原理：利用fileReader的readAsDataURL，將blob轉(zhuǎn)為base64

blobToBase64(blob) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      resolve(e.target.result);
    };
    // readAsDataURL
    fileReader.readAsDataURL(blob);
    fileReader.onerror = () => {
      reject(new Error('blobToBase64 error'));
    };
  });
}

調(diào)用

blobToBase64(blob).then(res => {
  // 轉(zhuǎn)化后的base64
  console.log('base64', res)
})

三、三種顯示方式，哪種更優(yōu)雅呢？

url: 一般來說，圖片的顯示還是建議使用url的方式比較好。如果后端傳過來的字段是圖片路徑的話。

base64：如果圖片較大，圖片的色彩層次比較豐富，則不適合使用這種方式，因為其Base64編碼后的字符串非常大，會明顯增大HTML頁面，影響加載速度。如果圖片像loading或者表格線這樣的，大小極小，但又占據(jù)了一次HTTP請求，而很多地方都會使用。則非常適用“base64:URL圖片”技術(shù)進行優(yōu)化了！。

blob: 當后端返回特定的圖片二進制流的時候，就像我第一part里的情景再現(xiàn)說的，前端用blob容器接收。圖片用blob展示會比較好。