小程序图片转换Base64格式的三种方法

1. 使用小程序自带的网络请求
2. 使用canvas 获取图片base64
3. 获取全局唯一的文件管理器 读取本地文件内容

wxml

<button type="primary" bindtap="btnChooseImage">选择图片</button>

js

async btnChooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        tempFilePaths.forEach(val => {
          // 方法1 使用小程序自带的网络请求
          this.getImageTobase64_url(val);
          // 方法2 canvas 获取图片base64
          this.getImageBase64_canvas(val);
          // 方法3 获取全局唯一的文件管理器 读取本地文件内容
          this.getImageBase64_readFile(val);
        });
      }
    })
  }

1.使用小程序自带的网络请求

async getImageTobase64_url(tempFilePath) {
    const base64 = await new Promise(resolve => {
      wx.request({
        url: tempFilePath,
        responseType: 'arraybuffer', //关键的参数，设置返回的数据格式为arraybuffer
        success: res => {
          //把arraybuffer转成base64
          let data = wx.arrayBufferToBase64(res.data);
          return resolve(('data:image/jpeg;base64,' + data));
        }
      });
    });
	return base64;
  }

2.使用canvas 获取图片base64

wxnl

<canvas id="myCanvas" type="2d" hidden="true"></canvas>

js

 // js
 //使用canvas 获取图片base64
  async getImageBase64_canvas(tempFilePath) {
    const {
      width,
      height
    } = await wx.getImageInfo({
      src: tempFilePath
    });
    const base64 = await new Promise(resolve => {
      const query = wx.createSelectorQuery();
      query.select("#myCanvas").fields({
        node: true, // 获取 node
      }).exec(res => {

        let {
          node: canvas
        } = res[0];

        let ctx = canvas.getContext('2d');
        let image = canvas.createImage();

        image.src = tempFilePath;
        image.onload = () => {
          ctx.drawImage(image, 0, 0, width, height);
          resolve(canvas.toDataURL())
        }
      });
    });
    return base64;
  }

3.获取全局唯一的文件管理器 读取本地文件内容

async getImageBase64_readFile(tempFilePath) {
  const base64 = await new Promise(resolve => {
    //获取全局唯一的文件管理器 
    wx.getFileSystemManager().readFile({ //读取本地文件内容
      filePath: tempFilePath, // 文件路径
      encoding: 'base64', // 返回格式
      success: ({
        data
      }) => {
        return resolve('data:image/png;base64,' + data);
      }
    });
  });
  return base64;
}

总结： 推荐使用 获取全局唯一的文件管理器 读取本地文件内容
注意：基础库要大于或等于1.9.9
博客地址：blog.csdn.net/caozhanp/ar…