uni-app 之 base64 格式的图片显示与保存到相册

base64 格式的图片显示

<image class="img-tip" :src="base64Picture(detailObj.qrCode)" mode="widthFix" />

/** base64 图片查看
 * @param e 图片地址
 * @returns {string} 返回结果
 */
base64Picture(e) {
  if (!e) return "";
  if (!e.includes("data:image/png;base64,")) e = "data:image/png;base64," + e; // 添加 base64 前缀
  e = e.replace(/[\r\n]/g, ""); // 去除回车
  return e;
},

保存 base64 图片到相册

/** 保存 base64 图片到相册
 * @param {Object} e base64 图片数据
 * @param {Object} name 保存的图片名称
 */
saveBase64ToAlbum(e, name = 'image') {
  const path = `${wx.env.USER_DATA_PATH}/${name}.png`; // 指定图片的临时路径
  const fsm = wx.getFileSystemManager(); // 获取小程序的文件系统
  // 把 arraybuffer 数据写入到临时目录中
  fsm.writeFile({
    filePath: path,
    data: e.replace(/^data:image\/\w+;base64,/, ''),
    encoding: 'base64',
    success: () => {
      uni.saveImageToPhotosAlbum({
        filePath: path,
        success: () => {
          toolTip('图片已保存到相册');
        }
      });
    }
  })
}

/** 显示消息提示框
 * @param {Object} title 提示的内容，长度与icon取值有关
 * title取值：成功、错误、加载中图标在小程序最多显示7个汉字
 * title取值：不显示在小程序最多显示两行，App仅支持单行显示
 * @param {Object} duration 提示的延迟时间，单位毫秒
 * @param {Object} icon 图标(success.成功 error.错误 loading.加载中 none.不显示)
 * @param {Object} mask 是否显示透明蒙层，防止触摸穿透
 */
toolTip(title, duration, icon, mask) {
  uni.showToast({
    title: title,
    icon: icon || "none",
    mask: mask || false,
    duration: duration || 2000
  });
}