使用html2canvas 或者canvas 生成图片,报跨域问题解决方案

1、背景

        业务需求 是要将 学生试卷与批注信息， 绘制成一张图片， 并下载。使用的是html2canvas 截图并生成图片下载，因为试卷是服务器上的图片，后台配置也允许了跨域，html2canvas 配置了useCORS:true。但是canvas在请求图片的时候还是报了跨域的错误。

       但是将浏览器的disabled cache 钩上，就可以正常的生成下载图片。后台配置了跨域 但是还是不行的话，前端就得想方案处理跨域，绕过跨域。

2、解决思路

        既然停用缓存后就可以正常的请求，第一个的想法是 ：在图片地址上加个随机数，这样请求的都是最新的图片。试了结果是 html2canvas 只取的是静态的url地址，不支持动态的，除非改html2canvas插件的源码，在源码函数里请求图片地址上加随机数，但费时间代价高。

       第二个想法是：执行 new image()，image.onload 后用canvas 绘制 在转换成base64

getImage(url, index) {
      // const that = this
      var xhr = new XMLHttpRequest()
      xhr.open('get', url, true)
      // 设置请求头（这一步得设置不然oss图片还是跨域）
      xhr.setRequestHeader("Cache-Control", "no-cache")
      xhr.responseType = 'blob'
      xhr.onload = function() {
        if (this.status == 200) {
          const dataURL = URL.createObjectURL(this.response)
          document.getElementById('down' + index).src = dataURL
        }
      }
      xhr.send()
    }

，试了结果不行，因为在canvas.toDataURL() 这里canvas 还是会去请求图片的，还是会有跨域，会报无法export的错，生成不了地址。

      最后的方案是：提前用ajax去请求图片地址，请求头加上cache-control:no-cache，responseType: blob，将接受的流转换成blob流地址，替换原来的图片地址。canvas 后面请求的也是blob本地流地址 就不会产生跨域。 见下图代码

getImage(url, index) {       // const that = this       var xhr = new XMLHttpRequest()       xhr.open('get', url, true)       // 设置请求头（这一步得设置不然oss图片还是跨域）       xhr.setRequestHeader("Cache-Control", "no-cache")       xhr.responseType = 'blob'       xhr.onload = function() {         if (this.status == 200) {           const dataURL = URL.createObjectURL(this.response)           document.getElementById('down' + index).src = dataURL         }       }       xhr.send()     }