微信小程序渲染后端返回的图片

灰太狼 2023-10-04 11:56 8阅读 0赞

*  ps: 最近因为小程序登录需要验证码验证，所以去研究了一波，微信小程序如何渲染后端返回来的图片
 *  回去重新看了一下[微信小程序开发文档][Link 1]
 *  发现可以利用`wx.request+wx.arrayBufferToBase64`,直接将图片转成base64直接渲染  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]

// 获取图片验证码
      getCode(){
        
        const _this = this
        this.setData({
        
          image:null,
          code:null
        })
        wx.request({
        
          url: 'url', 
          header: {
        
            'content-type': 'application/json' // 默认值
          },
          responseType:"arraybuffer",
          success (res) {
        
            let url ='data:image/png;base64,'+wx.arrayBufferToBase64(res.data)
            _this.setData({
        
            image:url
          })
          },
          fail(){
        
            _this.show("获取验证码失败","error")
            _this.setData({
        
              code:null
            })
          }
        })
      },

*  成功  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210427002445419.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210427002401141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210427005143338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzA0MDQ4,size_16,color_FFFFFF,t_70