/* 绘制分享图片 */
  drawCanvasImage() {
    let that = this
    let canvas = null;
    const dpr = wx.getSystemInfoSync().pixelRatio
    const rpx = wx.getSystemInfoSync().windowWidth
    // canvas定位都是以px为单位
    // rpx转换为px：
    // rpx单位大小 / 750 * wx.getSystemInfoSync().windowWidth = px单位大小
    let lMargin = 10 / 750 * rpx + 2 //行距
    let textSize = parseInt(32 / 750 * rpx) //字体大小
    wx.createSelectorQuery().select('#canvas').fields({ size: true, node: true }).exec(async (res) => {
      canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      //画布的大小px
      let canvasWidth = res[0].width
      let canvasHeight = res[0].height
      //画布大小根据屏幕分辨率进行缩放，防止模糊
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      ctx.scale(dpr, dpr)
      //画布背景色
      // ctx.fillStyle = "pink";
      // ctx.fillRect(0, 0, canvas.width, canvas.height)
      //画佛像图片
      const fxImg = canvas.createImage()
      let fxWidth = parseInt(450 / 750 * rpx) //图片宽
      let fxHeight
      let fxCenter = (canvasWidth - fxWidth) / 2 //佛像居中显示
      const blImg = canvas.createImage()
      let blWidth = parseInt(450 / 750 * rpx) //图片宽
      let blHeight
      let blCenter = (canvasWidth - blWidth) / 2 //背光居中显示
      const ltImg = canvas.createImage()
      let ltWidth = parseInt(550 / 750 * rpx)
      let ltHeight
      let ltCenter = (canvasWidth - ltWidth) / 2 //莲台居中显示
      const bgImg = canvas.createImage()
      const promixify = (api) => {
        return (options, ...params) => {
          return new Promise((resolve, reject) => {
            api(Object.assign({}, options, { success: resolve, fail: reject }), ...params)
          })
        }
      }
      const getImageInfo = promixify(wx.getImageInfo)
      const images = [that.data.fxSrc.fileUrl, that.data.blSrc.fileUrl, that.data.ltSrc.fileUrl, that.data.bgSrc.fileUrl]
      Promise.all(
        images.map(img => getImageInfo({ src: img }))
      ).then((imageInfos) => {
        if (imageInfos.length > 0) {
          fxImg.src = imageInfos[0].path
          fxHeight = parseInt(fxWidth * imageInfos[0].height / imageInfos[0].width)
          blImg.src = imageInfos[1].path
          blHeight = parseInt(blWidth * imageInfos[1].height / imageInfos[1].width)
          ltImg.src = imageInfos[2].path
          ltHeight = parseInt(ltWidth * imageInfos[2].height / imageInfos[2].width)
          bgImg.src = imageInfos[3].path
        }
      })
      let bgImgPo = await new Promise((resolve, reject) => {
        bgImg.onload = () => {
          resolve(bgImg)
        }
        bgImg.onerror = (e) => {
          reject(e)
        }
      });
      console.log("背景："+bgImg.complete)
      ctx.drawImage(bgImgPo, 0, 0 ,canvasWidth,canvasHeight)


      let fxImgPo = await new Promise((resolve, reject) => {
        fxImg.onload = () => {
          resolve(fxImg)
        }
        fxImg.onerror = (e) => {
          reject(e)
        }
      });
      console.log("佛像："+fxImgPo.complete)
      ctx.drawImage(fxImgPo, fxCenter, 0, fxWidth, fxHeight)


      let blImgPo = await new Promise((resolve, reject) => {
        blImg.onload = () => {
          resolve(blImg)
        }
        blImg.onerror = (e) => {
          reject(e)
        }
      });
      console.log("背光："+blImgPo.complete)
      ctx.drawImage(blImgPo, blCenter, 0, blWidth, blHeight)


      


      let ltImgPo = await new Promise((resolve, reject) => {
        ltImg.onload = () => {
          resolve(ltImg)
        }
        ltImg.onerror = (e) => {
          reject(e)
        }
      });
      console.log("莲台："+ltImgPo.complate)
      ctx.drawImage(ltImgPo, ltCenter, 0, ltWidth, ltHeight);


      


      
    })
  },
canvas画布加载的图片都是网络图片,调用wx.getImageInfo() 获取图片本地地址同时计算图片宽高;
这里ctx.drawImage()调用了四次,但是不能完全显示全部图片,控制台没有报错,控制每次只加载一张,都能加载成功;
切换ctx.drawImage()绘制图片的顺序,加载的数量有时成功2张,有时成功3张,这是为啥,大佬们帮忙看看~~