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

 

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

 

前言：推荐使用方法三，调试基础库要大于或等于1.9.9

 

文章目录

• 一、使用小程序自带的网络请求
• 二、使用canvas 获取图片base64
• 三、获取全局唯一的文件管理器 读取本地文件内容 
• 总结

调用相机或者相册获取本地路径

1.wxml

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

2.js

  async btnChooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePaths = res.tempFilePaths;
        tempFilePaths.forEach(val => {
          this.getImageTobase64_url(val);
          this.getImageBase64_canvas(val);
          this.getImageBase64_readFile(val);
        });

      }
    })
  },

 

一、使用小程序自带的网络请求

  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));
        }
      });
    });
    this.setData({
      base64
    })
  },

 

二、使用canvas 获取图片base64

1.wxml 

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

2.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();

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

    this.setData({
      base64
    })
  },

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

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);
      }
    });
  });
  this.setData({
    base64
  })
},

---

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了小程序图片转Base64的方法，第一种第二种不建议使用，建议使用第三种获取图片base64方法。