使用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()

    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值