前端将后端数据流转为图片(微信小程序)

MMQFQ

已于 2022-12-12 14:31:22 修改

阅读量1.6k

点赞数

文章标签：前端微信小程序小程序

于 2022-12-12 14:09:34 首次发布

本文链接：https://blog.youkuaiyun.com/MMQFQ/article/details/128286071

版权

本文介绍了如何在微信小程序中处理后端返回的数据流，将其转换为图片。关键点在于设置请求responseType为arraybuffer，并且由于小程序不支持btoa()函数，需要使用替代方法base64_encode来完成Base64编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获取后端流的请求responseType必须使用arraybuffer

将后端数据刘转换为base64再转换为本地图片

html与data

//  

 <van-image width="460rpx" height="460rpx" src="{{codeImg}}" />


//
data={
  codeImg: '',
}

简单版

async getImage(codeUrl) {
       
        let res = await wepy.request({
            url: 'url',
            method: 'POST',
            data: {
               data,
            },
            header: {
                'Content-Type': 'application/json;charset=UTF-8',
                Authorization: sessionToken,
            },
            responseType: 'arraybuffer',
        });
      
            if (res) {
                var binary = '';
                var bytes = new Uint8Array(res);
                for (var len = bytes.byteLength, i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
               let dataStr = window.btoa(binary);
               this.codeImg = "data:image/png;base64," + dataStr;
            }
        
    }

微信小程序不支持btoa()函数，

btoa() 方法用于创建一个 base-64 编码的字符串。

插入函数base64_encode；

完整版

  /*
  responseType: 'arraybuffer',
   
                 */
 async getImage(codeUrl) {     
        let res = await wepy.request({
            url: '请求路径',
            method: 'POST',
            data: {
                data,
            },
            header: {
                'Content-Type': 'application/json;charset=UTF-8',
                Authorization: sessionToken,
            },
            responseType: 'arraybuffer',
        });
      
            if (res) {
                var binary = '';
                var bytes = new Uint8Array(res);
                for (var len = bytes.byteLength, i = 0; i < len; i++) {
                    binary += String.fromCharCode(bytes[i]);
                }
                let dataStr = this.base64_encode(binary);
                let code = dataStr; // 后台返回的base64图片，没有带data:image/png;base64,的前缀。
                let src = `data:image/png;base64,${code}`;
                const fsm = wx.getFileSystemManager(); // 获取文件管理器
                code = code.replace(/\ +/g, ''); //去掉空格方法
                code = code.replace(/[\r\n]/g, '');

                const buffer = wx.base64ToArrayBuffer(code); //  将 base64 字符串转成 ArrayBuffer 对象
                const fileName = wx.env.USER_DATA_PATH + '/share_img.png'; // 文件系统中的用户目录路径 （本地路径）
                /**
                 * @param fileName: 文件路径
                 * @param buffer : 要写入的文本或二进制数据
                 * @param binary: 指定写入文件的字符编码
                 */
                fsm.writeFileSync(fileName, buffer, 'binary'); // 写入文件， 同步方法
                this.codeImg = fileName;
            }
        
    }
    base64_encode(str) {
        var c1, c2, c3;
        var base64EncodeChars =
            'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
        var i = 0,
            len = str.length,
            string = '';

        while (i < len) {
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len) {
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt((c1 & 0x3) << 4);
                string += '==';
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len) {
                string += base64EncodeChars.charAt(c1 >> 2);
                string += base64EncodeChars.charAt(
                    ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
                );
                string += base64EncodeChars.charAt((c2 & 0xf) << 2);
                string += '=';
                break;
            }
            c3 = str.charCodeAt(i++);
            string += base64EncodeChars.charAt(c1 >> 2);
            string += base64EncodeChars.charAt(
                ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
            );
            string += base64EncodeChars.charAt(
                ((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6)
            );
            string += base64EncodeChars.charAt(c3 & 0x3f);
        }
        return string;
    }

引用：

(15条消息) 微信小程序des加密不支持btoa的解决方法_进阶er的博客-优快云博客_btoa支持微信吗