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