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

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

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

html与data

1.  
   //
2.  
    
3.  
   <van-image width="460rpx" height="460rpx" src="{{codeImg}}" />
4.  
    
5.  
    
6.  
   //
7.  
   data={
8.  
   codeImg: '',
9.  
   }

简单版

1.  
   async getImage(codeUrl) {
2.  
    
3.  
   let res = await wepy.request({
4.  
   url: 'url',
5.  
   method: 'POST',
6.  
   data: {
7.  
   data,
8.  
   },
9.  
   header: {
10.  
    'Content-Type': 'application/json;charset=UTF-8',
11.  
    Authorization: sessionToken,
12.  
    },
13.  
    responseType: 'arraybuffer',
14.  
    });
15.  
     
16.  
    if (res) {
17.  
    var binary = '';
18.  
    var bytes = new Uint8Array(res);
19.  
    for (var len = bytes.byteLength, i = 0; i < len; i ) {
20.  
    binary = String.fromCharCode(bytes[i]);
21.  
    }
22.  
    let dataStr = window.btoa(binary);
23.  
    this.codeImg = "data:image/png;base64," dataStr;
24.  
    }
25.  
     
26.  
    }

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

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

插入函数base64_encode；

完整版

1.  
   /*
2.  
   responseType: 'arraybuffer',
3.  
    
4.  
   */
5.  
   async getImage(codeUrl) {
6.  
   let res = await wepy.request({
7.  
   url: '请求路径',
8.  
   method: 'POST',
9.  
   data: {
10.  
    data,
11.  
    },
12.  
    header: {
13.  
    'Content-Type': 'application/json;charset=UTF-8',
14.  
    Authorization: sessionToken,
15.  
    },
16.  
    responseType: 'arraybuffer',
17.  
    });
18.  
     
19.  
    if (res) {
20.  
    var binary = '';
21.  
    var bytes = new Uint8Array(res);
22.  
    for (var len = bytes.byteLength, i = 0; i < len; i ) {
23.  
    binary = String.fromCharCode(bytes[i]);
24.  
    }
25.  
    let dataStr = this.base64_encode(binary);
26.  
    let code = dataStr; // 后台返回的base64图片，没有带data:image/png;base64,的前缀。
27.  
    let src = `data:image/png;base64,${code}`;
28.  
    const fsm = wx.getFileSystemManager(); // 获取文件管理器
29.  
    code = code.replace(/\ /g, ''); //去掉空格方法
30.  
    code = code.replace(/[\r\n]/g, '');
31.  
     
32.  
    const buffer = wx.base64ToArrayBuffer(code); // 将 base64 字符串转成 ArrayBuffer 对象
33.  
    const fileName = wx.env.USER_DATA_PATH '/share_img.png'; // 文件系统中的用户目录路径 （本地路径）
34.  
    /**
35.  
    * @param fileName: 文件路径
36.  
    * @param buffer : 要写入的文本或二进制数据
37.  
    * @param binary: 指定写入文件的字符编码
38.  
    */
39.  
    fsm.writeFileSync(fileName, buffer, 'binary'); // 写入文件， 同步方法
40.  
    this.codeImg = fileName;
41.  
    }
42.  
     
43.  
    }
44.  
    base64_encode(str) {
45.  
    var c1, c2, c3;
46.  
    var base64EncodeChars =
47.  
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 /';
48.  
    var i = 0,
49.  
    len = str.length,
50.  
    string = '';
51.  
     
52.  
    while (i < len) {
53.  
    c1 = str.charCodeAt(i ) & 0xff;
54.  
    if (i == len) {
55.  
    string = base64EncodeChars.charAt(c1 >> 2);
56.  
    string = base64EncodeChars.charAt((c1 & 0x3) << 4);
57.  
    string = '==';
58.  
    break;
59.  
    }
60.  
    c2 = str.charCodeAt(i );
61.  
    if (i == len) {
62.  
    string = base64EncodeChars.charAt(c1 >> 2);
63.  
    string = base64EncodeChars.charAt(
64.  
    ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
65.  
    );
66.  
    string = base64EncodeChars.charAt((c2 & 0xf) << 2);
67.  
    string = '=';
68.  
    break;
69.  
    }
70.  
    c3 = str.charCodeAt(i );
71.  
    string = base64EncodeChars.charAt(c1 >> 2);
72.  
    string = base64EncodeChars.charAt(
73.  
    ((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4)
74.  
    );
75.  
    string = base64EncodeChars.charAt(
76.  
    ((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6)
77.  
    );
78.  
    string = base64EncodeChars.charAt(c3 & 0x3f);
79.  
    }
80.  
    return string;
81.  
    }

引用：

这篇好文章是转载于：学新通技术网