vue-qr网络图片跨域问题

记录一次使用vue-qr插件生成二维码因为logoSrc使用网络图片导致的跨域问题

解决方案：

1. 运维配置文件服务器支持跨域（最终解决方案，推荐！）
2. 前端支持跨域（有性能问题）

  <vue-qr
    :margin="0"
    :logoSrc="logoBase64"
    :text="xxx"
    :size="225"
    :logoScale="0.3"
  ></vue-qr>

toDataURL(src, callback, outputFormat) {
  const img = new Image()
  img.setAttribute('crossOrigin', 'anonymous')
  img.onload = function() {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    canvas.height = this.naturalHeight
    canvas.width = this.naturalWidth
    ctx.drawImage(this, 0, 0)
    const dataURL = canvas.toDataURL(outputFormat)
    callback(dataURL)
  }
  img.src = src + '?time=' + new Date().valueOf()
  if (img.complete || img.complete === undefined) {
    // 确保对缓存的图片也触发img.onload事件
    img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
    img.src = src
  }
},
this.toDataURL(url, dataUrl => {
   this.logoBase64 = dataUrl
})

温馨提示：建议跨域问题找后端或运维解决。