教你如何将后端返回图片流转为base64个格式

对于前端来说，图片展示一般是再简单不过，就是使用img标签绑定src属性即图片地址即可。
但现在有了新需求变化，后端返回的不是一般的图片地址（http://xxx.xxx.xxx.jpg），而是图片流，大致如下：

1665541978965.png

平常我们转base64都是有图片的网络地址，类似如下

let img = new Image();
img.src = 'https://xxx.xxx.xxx.com/attachments/image/202207/big_101381_87959.png';
img.onload = () => {
    let canvas = document.createElement('canvas');

    canvas.width = width || img.width;
    canvas.height = height || img.height;

    let ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    let base64URL = canvas.toDataURL("image/png", 1);
}

那如果是图片流，又该如何展示呢？

首先图片流可直接使用img标签进行展示，如下

想要转换图片流就得先拿到图片流，所以这里请求时和平时有略微不一样，需要加一个请求类型，以axios为例如下：

axios({
    method: 'get',
     url: url,
    responseType: 'arraybuffer' // 这里必须加上类型，以便拿到数据后进行转换
})

拿到数据之后就可以使用Blob和FileReader来进行转换了，完整代码如下

axios({
    method: 'get',
     url: url,  // 请求地址
    responseType: 'arraybuffer' // 这里必须加上类型，以便拿到数据后进行转换
}).then(res=>{
    let blob = new Blob( [res.data], { type: 'png' } )
    let fileReader= new FileReader();
    fileReader.readAsDataURL( blob );
    fileReader.onloadend = ( e ) => {
        let basr64Url = e.target.result;
    };
})

到这里图片流转base64格式就介绍完了，大家还有什么更好的办法吗，欢迎留言~~~