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本地流地址 就不会产生跨域。 见下图代码
|