我正在参加「掘金·启航计划」。

不管是原生js的canvas方法还是微信小程序的canvas，都不支持直接绘制base64格式图片，但可以经过转换后进行绘制。

vue

关键代码：

<template>
  <canvas class="canvas" id="canvas" width="375" height="667"></canvas>
</template>

<script>
import axios from 'axios'

export default {
  mounted() {
    this.initCanvas()
    this.drawBase64Img()
  },
  methods: {
    /**
     * 初始化画布
     */
    initCanvas() {
      this.canvas = document.getElementById('canvas')
      this.canvasCtx = this.canvas.getContext('2d')
    },
    /**
     * 获取二维码
     */
    drawBase64Img () {
      axios.get(`${请求url}`, {
      })
        .then(res=> {
          if (res?.data) {
            let imgbase64 = res.data // 接口返回的base64图片数据
            let img = new Image()
            img.crossOrigin = 'anonymous'
            img.src = 'data:image/jpeg;base64,' + imgbase64
            img.onload = () => { 
              this.canvasCtx.drawImage(img, 0, 0 , 100, 100);
            }
            img.onerror = (e) => { 
              self.$message('下载base64图片失败')
            }
          }
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

小程序

关键代码：

export function getBase64Img () {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${请求url}`,
      success: (res) => {
        const { data } = res.data || {}
        return getBase64File(data).then(resolve).catch(reject)
      },
      fail: (error) => {
        reject(error)
      }
    })
  })
}

export function getBase64File (base64Str) {
  return new Promise((resolve, reject) => {
    const fsm = wx.getFileSystemManager()  // 文件管理器
    const  FILE_BASE_NAME = `tmp_base64src_${base64Str.substring(0, 6)}` // 文件名
    const  format = 'png' // 文件后缀
    const  buffer = wx.base64ToArrayBuffer(base64Str) // base 转二进制
    const  filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}` // 文件名

    fsm.writeFile({ // 写文件
      filePath,
      data: buffer,
      encoding: 'binary',
      success: (res) => {
        wx.getImageInfo({ // 读取图片
          src: filePath,
          success: (res) => {
            // console.log(res)
            if (res?.path) {
              resolve(res.path)
            } else {
              reject(res)
            }
          },
          error: (res) => {
            reject(res)
          }
        })
      }
    })
  })
}



const ctx = wx.createCanvasContext('canvas'), //canvas
getBase64Img.then(path => {
    //画图
    ctx.drawImage(path, 0, 0, 100, 100) 
    ctx.draw()
})