js工具函数之将网络图片url地址转换为base64格式

1、封装工具函数，将url地址，转换为base64格式输出

      function getBase64(url, callback) {
        //通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片，相比 createElement() 创建  省去了 append()，也就避免了文档冗余和污染
        var Img = new Image(),
          dataURL = '';
        Img.src = url +"?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存，浏览器会报错;
        Img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
        Img.onload = function () { //要先确保图片完整获取到，这是个异步事件
          var canvas = document.createElement("canvas"), //创建canvas元素
            width = Img.width, //确保canvas的尺寸和图片一样
            height = Img.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(Img, 0, 0, width, height); //将图片绘制到canvas中
          dataURL = canvas.toDataURL('image/jpeg'); //转换图片为dataURL
          callback ? callback(dataURL) : null; //调用回调函数
        };
      }

使用方式示例：

getBase64('http://p1.pstatp.com/large/435d000085555bd8de10', (dataURL) => { console.log(dataURL) })

2、在上面的基础上，封装promise版本

    getBase64(url) {
      return new Promise((resolve, reject) => {
        var Img = new Image()
        var dataURL = ''
        Img.setAttribute('crossOrigin', 'Anonymous')
        Img.src = url + '?v=' + Math.random()
        Img.onload = function() {
          // 要先确保图片完整获取到，这是个异步事件
          var canvas = document.createElement('canvas') // 创建canvas元素
          var width = Img.width // 确保canvas的尺寸和图片一样
          var height = Img.height
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(Img, 0, 0, width, height) // 将图片绘制到canvas中
          dataURL = canvas.toDataURL('image/jpeg') // 转换图片为dataURL
          resolve(dataURL)
        }
      })
    }

封装调用函数

    async baseCallback(url) {
      try {
        console.log('执行')
        const res = await this.getBase64(url)
        console.log(res) // 获取到结果
        this.bgcImgUrl = res // 我这里将结果赋值给需要用的变量属性
      } catch (err) {
        console.log(err)
      }
    }

参考链接：
知识点https://www.jb51.net/article/128554.htm

报错解决https://blog.csdn.net/hangge0111/article/details/81585841