java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > 后端返回图片在前端转换展示

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

作者：鲸洛洛

这篇文章主要给大家介绍了关于后端返回各种图片形式在前端的转换及展示方法对比的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、接口返回的图片显示如下所示：

（在控制台看的）返回的是这个图片（二进制）

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

出现问题的原因的axios 默认返回的是 json 文本形式，二进制图片数据被强制转换成了 json 文本形式。

找到了原因，解决方案就好办了。我们在 axios 里面，responseType 默认返回数据类型是 json，将其改为返回数据类型 blob。下面代码是正常的图片显示，若是接口返回的图片要回显到 van-uploader里面，参考 van-uplaoder保存文件到后端，回显后端接口返回的数据

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

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'));
      };
    }

调用

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

2.base64 转 blob

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

function base64ToBlob ({b64data = '', contentType = '', sliceSize = 512} = {}) {
  return new Promise((resolve, reject) => {
    // 使用 atob() 方法将数据解码
    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 位无符号整数值的类型化数组。内容将初始化为 0。
      // 如果无法分配请求数目的字节，则将引发异常。
      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)
  })
 }

调用

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展示会比较好。

总结

到此这篇关于后端返回各种图片形式在前端的转换及展示方法对比的文章就介绍到这了,更多相关后端返回图片在前端转换展示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文