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

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

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

图1

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

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

图2

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

基于 html2canvas 实现的截图,球队LOGO已经消失

图3

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

访问:http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ,响应

图4

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

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

由于图片服务器为Nginx,设置允许跨域访问,重启Nginx

图5

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

再次访问:http://backend.kaiqiu_shujujiexi_api.dev/team_logo/GZHOU.png ,响应

图6

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

js的截图代码中添加1行:useCORS: true

图7

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

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

图8

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

此种解决方案,即使是跨顶级域名也是支持的

图9

 

原创文章,作者:kepupublish,如若转载,请注明出处:https://blog.ytso.com/180568.html

(0)
上一篇 2021年10月31日 09:26
下一篇 2021年10月31日

相关推荐

发表回复

登录后才能评论