canvas如何将image中onload异步请求变成同步

前言：为什么我们需要将image的onload加载事件变成同步请求呢？答案当然是图片加载完成后方便我们后续去做一些操作，不然我们想去做一些操作的时候，还需要到onload函数去操作。

一、通过Promise封装

  // url 图片路径
  loadImage(url) {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.setAttribute('crossOrigin', 'anonymous')
        img.src = url
        img.onload = () => {
          // 当图像加载完成后进行resolve
          resolve(img)
        }
        img.onerror = () => {
          reject(new Error('图像加载失败'))
        }
      })
   }

二、通过async/await方式使用

  async getCanvasToAuthImage() {
      const canvas = document.getElementById('canvas-auth-box')
      const ctx = canvas.getContext('2d')
      // 调用封装好loadImage方法 这样就可以使用同步的方式去绘制canvas
      const img = await this.loadImage(this.pic2)
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)
      ctx.fillStyle = '#1d2129'
      ctx.font = 'normal 14px sans-serif'
      ctx.fillText(`画图`, 100, 100)
   }