xlfsummer / mp-painter

声明式地创建适用于 uniapp, 原生微信小程序和原生H5的 canvas 海报

Home Page:https://mp-painter.xlf-summer.cn/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

图片能支持base64吗?

Seanxwy opened this issue · comments

commented

图片能支持base64吗?

小程序中 不支持 绘制 base64 图片

因为在小程序平台上,mp-painter 绘制时使用的 CavansContext.getImageInfo, CavansContext.drawImage 均不支持传入 base64 图片地址 (讨论见 微信开放社区).

目前的确有 方法 可以把 base64 图片地址转换为本地临时文件地址,但是使用了 FileManager, env 等,过程比较 hack, 没有出现在开发者文档中, 暂不打算在 mp-painter 中集成,开发者可以自行先将 base64 图片地址转换为本地临时文件地址,然后传入 mp-painter 绘制

wx.base64ToArrayBuffer 已废弃,FileSystemManager.writeFile 可以直接写入 base64 字符串

// 微信小程序 base64 转本地文件地址
export function base64src(base64) {
  return new Promise((resolve, reject) => {
    const FILE_BASE_NAME = 'tmp_base64src'
    const fileManager = wx.getFileSystemManager()
    const [, format, bodyData] =
      /data:image\/(\w+);base64,(.*)/.exec(base64) || []
    if (!format) {
      reject(new Error('ERROR_BASE64SRC_PARSE'))
      return
    }
    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
    fileManager.writeFile({
      filePath,
      data: bodyData,
      encoding: 'base64',
      success() {
        wx.getImageInfo({
          src: filePath,
          success(res) {
            resolve(res)
          },
          fail() {
            reject(new Error('ERROR_BASE64SRC_READ'))
          }
        })
      },
      fail() {
        reject(new Error('ERROR_BASE64SRC_WRITE'))
      }
    })
  })
}