小程序学习之路-ArrayBuffer、base64、url互转

1,952 阅读1分钟

最近在实现上传头像的功能的时候涉及到二进制数据转换为可显示的图片的问题,这里面小程序给了两种方法,第一种方法ArrayBuffer转base64完美实现了,但是第二种方法ArrayBuffer转url不知道是不是数据太大的问题还是什么原因在渲染的时候展示不出来图片。

这是返回的二进制数据: image.png

buffer转base64:

this.setData({
        codeUrl : wx.arrayBufferToBase64(res.data.data)
      })
<image style="width:430rpx;height:430rpx;border-radius: 50%;"  src='data:image/png;base64,{{codeUrl}}'></image>

buffer转url:

 const FILE_BASE_NAME = 'qrcode_base64src';
      const filePath = wx.env.USER_DATA_PATH + '/' + FILE_BASE_NAME + '.jpg';
      console.log('filePath',filePath)
      fsm.writeFile({
        filePath,
        data: res.data.data,
        encoding: 'binary',
        success() {
          that.setData({
            codeUrl: filePath //结果图片
          })
          console.log('codeurl',that.data.codeUrl)
        },
        fail(){
          console.log('fail')
        }
      })
<image style="width:430rpx;height:430rpx;border-radius: 50%;"  src='{{codeUrl}}'></image>

附:

url转arraybuffer

   wx.chooseImage({
      success: function(res) {
        const fsm = wx.getFileSystemManager();
        fsm.readFile({
          filePath:res.tempFilePaths[0],
          success:function(res){
          	//转换成功
          	var arrayBuffer = res.data
          },
          fail:function(e){}
        })
      }
    })

base64转arrayBuffer

var arrayBuffer = wx.base64ToArrayBuffer(imgBase64)