后端返回各种图片形式在前端的转换及展示

素颜马尾好姑娘i 2024-03-27 13:13 87阅读 0赞

## 一、 ##

接口返回的图片显示如下所示：（在控制台看的）返回的是这个图片（二进制）

## ![12513f5a80c74e3ea62ee6ee8f409d1f.png][] ##

可是，在 打印的时候，返回的却是

![c20276734eae482d81448a948106b4bd.png][]

出现问题的原因的axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。  
找到了原因，解决方案就好办了。我们在 axios 里面，responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。下面代码是正常的图片显示，若是接口返回的图片要回显到 van-uploader里面，参考 [van-uplaoder保存文件到后端，回显后端接口返回的数据\_van-uploader\_鲸洛洛的博客-CSDN博客][van-uplaoder_van-uploader_-CSDN]

> 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，三者之间转化 ##

### 1.url 转 base64 ###

原理： 利用canvas.toDataURL的API转化成base64

调用

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

### 2.base64 转 blob ###

原理：利用URL.createObjectURL为blob对象创建临时的URL

调用

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

### 3.blob 转 base64 ###

原理：利用fileReader的readAsDataURL，将blob转为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'));
        };
      });
    }

调用

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

## 三、三种显示方式，哪种更优雅呢？ ##

url: 一般来说，图片的显示还是建议使用url的方式比较好。如果后端传过来的字段是图片路径的话。

base64：如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。 如果图片像loading或者表格线这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！。

blob: 当后端返回特定的图片二进制流的时候，就像我第一part里的情景再现说的，前端用blob容器接收。图片用blob展示会比较好。

[12513f5a80c74e3ea62ee6ee8f409d1f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/643806ae3db64d7db7121f4c059b87ec.png
[c20276734eae482d81448a948106b4bd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b4eec23b06804acb8076dfa69b1d185f.png
[van-uplaoder_van-uploader_-CSDN]: https://blog.csdn.net/qq_43532275/article/details/128357086