记录html2canvas前端海报绘制，图片跨域导致绘制失败，下载的海报没有网络图片问题纯前端解决

背景

之前的一个需求，web端，业务中的某个内容以海报的形式在页面上呈现，然后点击下载按钮，将海报保存为图片存储在本地，最近产品反馈了一个问题，海报下载时，顶部的banner图片在浏览器中能正常呈现，下载后的图片顶部banner不能够正常显示，这块的下载的时候的海报绘制，是通过html2canvas来实现的。

问题排查

开发者工具打开时，海报正常绘制，关闭开发者工具，下载海报，顶部banner不显示，打开控制台，提示Access to Image at 'xxxx（我的图片）' from origin '我的图片域名' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 我当前网站的域名' is therefore not allowed access.  并且提示报错发生在html2canvas的源码当中，我的图片域名和我当前网站的域名确实不是一个域，所以应该是图片跨域引起的html2canvas绘制图片失败，

问题解决

1、html2canvas跨域配置

      const el = this.$refs.canvasContent;      
      const config = {
            useCORS: true,//配置跨域
      };
      this.html2canvas(el, config).then(data => {
          const a = document.createElement("a");
          a.style.display = 'none';
          a.href =Obj.tagName==="IMG"?
                  Obj.src:Obj.tagName==="CANVAS"?     
                  Obj.toDataURL():"javascript: void(0)";
          a.download = name;
          // 兼容 Firefox
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
      });

2、加了上面的并没有成功，html2canvas在把html转为canvas之前会先复制原有的dom，然后在渲染，显然在复制dom，我的banner图片是用img标签加载的网络图片，在html2canvas中img标签get网络图片资源渲染时图片就已经跨域了，应该还没有走到配置层级 ；

所以先了解一下img标签的crossorigin属性，

因为我这边不需要进行证书之类的验证，所以我设置了anomymous，

 <img src="xxxx" crossorigin = "anonymous">

注意：使用了这个字段之后，需要在服务端进行相应的跨域请求设置，为了满足此需要，我在我的容器的nginx中进行了跨域请求的设置，如下

    location / {
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }

再试一下，成功绘制！问题解决，特此记录