图片流转化为base64图片格式

问题描述:

请求后端的数据,返回的是文件流的形式,如下图所示,如何转化为图片格式?

image

对于这个问题,主要由以下三步来解决:

第一步:要设定请求的 responseType为arraybuffer。把文件流转化成固定的原始二进制数据缓冲区。

第二步:转化为data:image/png;base64,。其中data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。

第三步:将base64字符赋值到img的src中。


代码示例:

codeImgPost(`${BASE_PATH}/web/imgcode?now=`+new Date().getTime()).then(response => {

    return 'data:image/png;base64,' + btoa(

        new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')

    )

}).then(data => {

    var code_img = $('.code_img');

    code_img.attr('src', data);

    code_img.css('width', '90px');

});

你可能感兴趣的:(图片流转化为base64图片格式)