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
原创文章，作者：kepupublish，如若转载，请注明出处：https://blog.ytso.com/tech/webdev/180568.html