vue js代码实现图片转成base64

图片转base64，使用canvas.toDataURL,
首先需要下载该图像，当图像加载完成后，我们可以使用canvas元素来绘制图像，并且可以使用它的toDataURL将图像转换为base64。

    convertImageToBase64 (imgUrl, callback) {
      const image = new Image()
      image.crossOrigin = 'anonymous'
      image.onload = () => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.height = image.naturalHeight
        canvas.width = image.naturalWidth
        ctx.drawImage(image, 0, 0)
        const dataUrl = canvas.toDataURL()
        callback && callback(dataUrl)
      }
      image.src = imgUrl
    },
    base64CallBack (base64) {
      console.log(base64)
    },
  //方法调用  this.src:图片地址
  this.convertImageToBase64(this.src, this.base64CallBack)

当一个表格数据中有图标，需要都转成对应的base64图片时，一般就是循环处理表格数据tableData，但是convertImageToBase64()方法中图片需要加载成功才会去转base64, 图片转成base64和循环过程是异步的，所以为了代码功能正常，需要强制变成同步执行，可以借助async，await实现，值得注意的是await必须返回一个Promise对象，
代码如下：

this.tableData.forEach(async (item, index) => {
    for (let key in item) {
       //一个表格数据中有多个字段，iconUrl就是图标字段
       if (item[key] && item[key].iconUrl) {
         item[key + '_base64'] = await this.convertImageToBase64(item[key].iconUrl)
       }
    }
 })
 convertImageToBase64 (imgUrl) {
      const image = new Image()
      image.crossOrigin = 'anonymous'
      let dataUrl = ''
      return new Promise((resolve, reject) => {
        image.onload = () => {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')
          canvas.height = image.naturalHeight
          canvas.width = image.naturalWidth
          ctx.drawImage(image, 0, 0)
          dataUrl = canvas.toDataURL()
          //通过resolve将返回值返回
          resolve(dataUrl)
        }
        image.src = imgUrl
      })
    }