关于如何自动截图 iframe 里面的网页内容

[gy123]

目前我的需求是打开第三方网页,然后两秒后截图自动上传到服务器;

(1)自己试了试使用 html2canvas 进行截图,本地元素没问题,如果碰到图片的话,使用 nginx 反代图片网址方式也解决了跨域问题无法截图;
(2)但是使用 iframe 标签这种方式加载第三方网站,如 http://cdn.dns-detect.alicdn.com,就算使用 nginx 反向代理后,依然无法使用 html2canvas 进行截图;f12 看 log 感觉只反代了主页但是里面有其他元素依然跨域导致?

大佬们有没有什么便捷的方法,能够将第三方网站进行截图;网上看了下 html2canvas 好像是限制了截图 iframe 这种~

[fwin3001]

帮 op 问 ai ，“用无头浏览器或者之类的前端测试工具，可以解决 op 的问题吗？”答案是肯定的。贴出 ai 的部分回复：“选择一个无头浏览器或测试框架,如 Puppeteer

使用框架加载目标网页,等待 iframe 内容加载完毕

调用框架提供的网页截图 API,如 page.screenshot()

将获取到的图片数据保存为文件或上传到服务器

可以通过设置视窗大小参数,获取不同尺寸的截图

针对动态内容,可以插入等待加载的代码,确保内容呈现完全后再截图

可以通过框架提供的能力模拟各种交互操作后再截图”

[gy123]

@fwin3001 首先感谢,我可能没描述清除,这个内嵌 iframe 的网页最后会分享给用户,然后用户在手机打开网页后自动截图上传服务器

[okakuyang]

应该是跨域引起的，估计你没有正确反向代理到第三方网站的图片。解决方法也有，你需要修改 html2canvas 的代码，因为这个库在脚本中重新下载了图片，所以触发了跨域。会出现脏画布的情况。你可以修改库中下载图片部分的代码，下载下来数据 blob 后转成 base64 再赋给 img 对象这样你的图片就是本地的图片不再跨域。

[gy123]

@okakuyang 图片解决没问题,就是使用 iframe 加载第三方网页没法截图~类似这个 http://cdn.dns-detect.alicdn.com/

[dcsuibian]

不行吧。不同源的第三方网页里显示的可以是用户的敏感信息。
如果你可以通过外边的 js 获取到并发回自己的服务器，这不妥妥的浏览器安全漏洞么。
很刑

[MossFox]

是浏览器的限制，JavaScript 不可以获取跨域的内容。这是考虑到安全性的设计。

这种需求要么走桌面端浏览器才有的屏幕录制接口，要么就定制浏览器客户端吧。

[krapnik]

https://www.screenshotmaster.com/

[gy123]

@dcsuibian 谢谢,那就算了,在想别的办法呗

[gy123]

@MossFox 谢谢

[gy123]

@krapnik 谢谢