使用html2canvas生成海报 阿里云oss图片或网络图片报跨域问题

使用html2canvas生成海报，阿里云oss图片或网络图片报跨域问题

背景

项目中需要一个生成海报功能，因为图片是上传到了阿里云oss上面，所以导致html2canvas截图得时候，图片显示空白然后配置html2canvas日志功能 logging: false， 发现图片报了跨域问题，首先开启了html2canvas useCORS:true, 发现并没有什么用。

解决思路

解决问题搜索过程中发现一篇大佬的文章，说阿里云服务器配置允许跨域之后，还是不行得情况下，将浏览器disabled cache 勾选上，试了下发现可以正常生成海报，但是也不可能给每个用户教他们去开始这个disabled cache 。此时想到是否可以使用请求来请求图片转换一下，碰巧又发现一篇文章可以将图片地址发送一次请求，获取请求返回得值作为图片路径，但是发现还是报错跨域，然后对比开启disabled cache，发现请求头中多出一个Cache-Control ：no-cache ，于是设置请求头，至此跨域问题解决，下面上代码

/*** 点击图片将需要生成海报得oss图片做下请求*/checkewm(ewm) {this.tempPoster = Object.assign({}, ewm);this.boxShow = true;this.getImage(this.tempPoster.pic,'dialogBgImg')this.getImage(this.ewm,'dialogEwm')},/*** 将oss图片做一次请求，转换下，网络路径图片都可以* url: 网络图片得路径* imgId: 网络图片img标签得id*/ getImage(url,imgId) {console.log(url,imgId)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) {document.getElementById(imgId).src = URL.createObjectURL(this.response);console.log('this.response',this.response)}};xhr.send();},/*** 生成海报并下载得方法*/ createdimg() {// 转换需要生成海报得图片// this.$refs.imageWrapper 需要截图得容器html2canvas(this.$refs.imageWrapper, {useCORS: true,logging: false,}).then((canvas) => {// 创建a标签下载const link = document.createElement("a"); // 创建a标签link.href = canvas.toDataURL(); // 是canvas对象的一种方法，用于将canvas对象转换为base64位编码link.setAttribute("download", "图片canvas.png"); // 利用了a标签的download 来下载 canvas图片link.style.display = "none"; // 将图片隐藏起来document.body.appendChild(link); // 插入到其中link.click();});},