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

 

永夜