How does the applet use canvas to implement base64Image pictures to make posters

@TOC applet How to use canvas to make base64 pictures into posters

Welcome to Markdown Editor

I recently encountered this problem when developing a small program, and I couldn't find a suitable answer on the Internet.

  survived:function () {
      let vm = this
        // 创建画布对象
      const ctx = wx.createCanvasContext("myCanvas", vm)
        // base64格式图片转本地文件
      const fsm = wx.getFileSystemManager();
      const timestamp = Date.parse(new Date()); // 先创建时间戳用来命名（不加时间戳在画连续画第二张图的时候有问题）
      timestamp: timestamp / 1000
      const FILE_BASE_NAME = 'tmp_base64' + timestamp; //自定义文件名  因第二张图相同名字读取第一张故加个时间戳
      console.log(FILE_BASE_NAME)
      var base64data = vm.properties.base64Image;//base64格式图片
        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);
      console.log(filePath)
        fsm.writeFile ({
          filePath,
          data: buffer,
          encoding: 'binary',
          success() {
            filePath;
          },
          fail() {
            return (new Error('ERROR_BASE64SRC_WRITE'));
          },
        });
      console.log(filePath)
      console.log(wx.env.USER_DATA_PATH)
      const basepath = `${wx.env.USER_DATA_PATH}`
      // console.log(filePath === filePath)
      // console.log(filePath)
      setTimeout(() => {
        wx.getImageInfo({
          src: filePath,
          success: function (res) {
            // 根据 图片的大小 绘制底图 的大小
            console.log(res) // 绘制底图的图片信息",
            let imgW = res.width
            let imgH = res.height
            let imgPath = res.path
            vm.setData({
              canvasHeight: imgH,
              canvasWidth: imgW
            })
            // 绘制底图 用原图的宽高比绘制
            ctx.drawImage(imgPath, 0, 0, imgW, imgH)
            let srclogo =  vm.data.codeImg  // logo图片的路径
                // 绘制logo
            ctx.drawImage(srclogo, 12, imgH - 56, 240, 38)
                ctx.draw()
                wx.showLoading({
                  title: '正在保存',
                  mask: true
                })
            setTimeout(() => {
                  wx.canvasToTempFilePath({
                    canvasId: 'myCanvas',
                    success: function (res) {
                      console.log(res) // 合成的带有logo得图片
                      let tempFilePath = res.tempFilePath
                      // 保存到相册
                      console.log(tempFilePath)
                      wx.saveImageToPhotosAlbum({
                        filePath: tempFilePath,
                        success(res) {
                          wx.hideLoading()
                          fsm.readdir({   // 读取目录内文件列表
                            dirPath: basepath,
                            success(res) {
                              res.files.forEach((val) => { // 遍历文件列表里的数据
                                console.log(val)
                                fsm.unlink({  // 清除writeFile保存的图片
                                  filePath: basepath + '/' + val
                                });
                              })
                            }, fail(err) {
                              console.log(err)
                            }
                          })
                          // wx.getSavedFileList({
                          //   success: savedFileInfo => {
                          //     let list = savedFileInfo.fileList
                          //     console.log("list:", savedFileInfo.fileList)
                          //     for (let i = 0; i < list.length; i++) {
                          //       wx.removeSavedFile({
                          //         filePath: list[i].filePath,
                          //       })
                          //     }
                          //   }
                          // })
                          wx.showModal({
                            title: '温馨提示',
                            content: '图片保存成功，可在相册中查看',
                            showCancel: false,
                          })
                        },

                        fail(res) {
                          wx.hideLoading()
                          wx.showModal({
                            title: '温馨提示',
                            content: '图片保存失败，请重试',
                            showCancel: false
                          })
                        }
                      })
                    }
                  }, vm)
            }, 1000)       
          },
          fail(res) {
            wx.hideLoading()
            wx.showModal({
              title: '温馨提示',
              content: '图片信息获取失败，请重试',
              showCancel: false
            })
          }
        })
      },100)
    },