网络图片转base64

let xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl='www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png', true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status === 200) {
        let blob = this.response
        let fileReader = new FileReader()
        fileReader.onloadend = function (e) {
          // el.src = e.target.result
        }
        fileReader.readAsDataURL(blob)
      }
    }
  xhr.send()

  // svg转base64
  const svg = document.querySelector('svg')
  const s = new XMLSerializer().serializeToString(svg)
  const src = `data:image/svg+xml;base64,${window.btoa(s)}`
  // ↓ 创建图片容器并存放
  const img = new Image() // 创建图片容器承载过渡
  img.src = src
  // 注意：需要在图片onload方法中执行
  img.onload = () => {
    // ↓ 第二部分
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    console.log(canvas)
    const context = canvas.getContext('2d')
    context.drawImage(img, 0, 0)
    const ImgBase64 = canvas.toDataURL('image/png')
    console.log(ImgBase64)
  }

　　解决vue项目绑定img src但 ie不显示 于是写成自定义指令

Vue.directive('toBase64', {
  bind: function (el, binding) {
    const { value: imgIds } = binding
    let showImg = ''
    let defaultImg = ''
    if (Array.isArray(imgIds)) {
      showImg = imgIds[0]
      defaultImg = imgIds[1]
    } else {
      showImg = imgIds
    }
    let imgUrl = config.imgBaseUrl + showImg
    if (!showImg || !window.navigator.msSaveBlob) {
      el.src = showImg ? imgUrl : defaultImg
      return
    }
    let xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status === 200) {
        let blob = this.response
        let fileReader = new FileReader()
        fileReader.onloadend = function (e) {
          el.src = e.target.result
        }
        fileReader.readAsDataURL(blob)
      }
    }
    xhr.send()
  },
  update: function (el, binding) {
    const { oldValue, value: imgIds } = binding
    if (oldValue.toString() === imgIds.toString()) {
      return
    }
    let showImg = ''
    let defaultImg = ''
    if (Array.isArray(imgIds)) {
      showImg = imgIds[0]
      defaultImg = imgIds[1]
    } else {
      showImg = imgIds
    }
    let imgUrl = config.imgBaseUrl + showImg
    if (!showImg || !window.navigator.msSaveBlob) {
      el.src = showImg ? imgUrl : defaultImg
      return
    }
    let xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status === 200) {
        let blob = this.response
        let fileReader = new FileReader()
        fileReader.onloadend = function (e) {
          el.src = e.target.result
        }
        fileReader.readAsDataURL(blob)
      }
    }
    xhr.send()
  }
})