js将图片转为base64（解决Canvas.toDataURL 图片跨域问题）

场景一：将项目中的图片资源转为base64

function convertImgToBase64(url, callback) {
        let canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d'),
        img = new Image();
        img.crossOrigin = 'anonymous';//解决Canvas.toDataURL 图片跨域问题
        img.onload = () => {
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
          let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
          callback && callback(dataURL);
          canvas = null;
        };
        img.src = url;
      }

var  baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
    baseUrl = baseUrl
})

场景二：将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片资源转化成base64：

  
  
  



  

  
用原生JS上传