1. 程式人生 > >小程式base64轉為本地圖片

小程式base64轉為本地圖片

小程式分享二維碼是base64格式,在製作分享圖時,需要轉換為圖片格式

1、新建base64src.js檔案

const fsm = wx.getFileSystemManager();
const FILE_BASE_NAME = 'tmp_base64src'; //自定義檔名

function base64src(base64data, cb) {
  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
  if (!format) {
    return (new Error('ERROR_BASE64SRC_PARSE'));
  }
  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
  const buffer = wx.base64ToArrayBuffer(bodyData);
  fsm.writeFile({
    filePath,
    data: buffer,
    encoding: 'binary',
    success() {
      cb(filePath);
    },
    fail() {
      return (new Error('ERROR_BASE64SRC_WRITE'));
    },
  });
};

export { base64src };

2、在需要使用的檔案中引入並使用

import { base64src } from '../../utils/base64src.js'
Page({
  data: {
    shareQrImg: "data:image/jpeg;base64,/9j/4AAQSkZJRgA........GASDFKGKF=" //base64圖片
  },
  onLoad: function (options) {
    base64src(this.data.shareQrImg, res => {
      console.log(res) // 返回圖片地址,直接賦值到image標籤即可
    });
  },
})

3、如果需要網路圖片轉換成base64格式。

wx.request({
  url: "https://s0.2mdn.net/simgad/10657937226496242109",
  method: 'GET',
  responseType: 'arraybuffer',
  success: (res) => {
    let base64 = wx.arrayBufferToBase64(res.data);
    let userImageBase64 = 'data:image/jpg;base64,' + base64;
    console.log(userImageBase64); // 列印base64格式圖片
    // 如果需要使用本地快取圖片,請參照第一步
  }
})