html2canvas 在跨二级域名下的无法截图的解决流程

1、网页界面中的红框中的图片为跨二级域名所调用的图片，如图1

图1

2、网页源代码，红框中的图片地址为相对于当前网页地址的二级域名，如图2

图2

3、基于 html2canvas 实现的截图，球队LOGO已经消失，如图3

图3

4、访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应如图4

图4

5、由于图片服务器为Nginx，设置允许跨域访问，重启Nginx，如图5

在nginx.conf里找到server项，并在里面添加如下配置：
add_header Access-Control-Allow-Origin *;

图5

6、再次访问：http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ，响应如图6

图6

7、js的截图代码中添加2行：allowTaint: true, useCORS: true，如图7

图7

8、截图成功，html2canvas 在跨二级域名下的无法截图的问题得到解决，如图8

图8

9、此种解决方案，即使是跨顶级域名也是支持的，如图9

图9