アプレット画像を Base64 形式に変換する 3 つの方法

1. アプレットに付属のネットワーク リクエストを使用する

1. wx.request() このメソッドは、ネットワーク https パスの画像に適していますが、wxfile://xxxx を解析できないため、変換エラーが発生します

image2Base64(imgUrl) {
        return new Promise((resolve, reject) => { // promise 解决异步问题
            wx.request({
                url: imgUrl,
                responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffer
                success: (res) => {
                    var base64 = wx.arrayBufferToBase64(res.data);
                    base64 = 'data:image/jpeg;base64,' + base64;
                    resolve(base64);
                },
                fail: (res) => {
                    reject(false);
                }
            })
        })
    }

2. wx.getFileSystemManager().readFile() ローカルの写真または写真を変換して解析できます wxfile://xxxx

wx.chooseImage({
      count: 1, // 默认9 
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 
      success(res) {
        wx.getFileSystemManager().readFile({
          filePath: res.tempFilePaths[0], //要读取的文件的路径 (本地路径)
          encoding: "base64", //指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
          success(res) {
            //转换完毕，执行上传
            _this.setData({
              avatar: 'data:image/png;base64,' + res.data
            })
          }
        })
      }
    })

2. canvas を使用して 画像 base64 を取得します

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

//使用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
    })
  },

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