这是一个创建于 528 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前我的需求是打开第三方网页,然后两秒后截图自动上传到服务器;
(1)自己试了试使用 html2canvas 进行截图,本地元素没问题,如果碰到图片的话,使用 nginx 反代图片网址方式也解决了跨域问题无法截图;
(2)但是使用 iframe 标签这种方式加载第三方网站,如 http://cdn.dns-detect.alicdn.com,就算使用 nginx 反向代理后,依然无法使用 html2canvas 进行截图;f12 看 log 感觉只反代了主页但是里面有其他元素依然跨域导致?
大佬们有没有什么便捷的方法,能够将第三方网站进行截图;网上看了下 html2canvas 好像是限制了截图 iframe 这种~
 |
1
fwin3001 2023-07-18 16:32:33 +08:00
帮 op 问 ai ，“用无头浏览器或者之类的前端测试工具，可以解决 op 的问题吗？”答案是肯定的。贴出 ai 的部分回复：“选择一个无头浏览器或测试框架,如 Puppeteer
使用框架加载目标网页,等待 iframe 内容加载完毕 调用框架提供的网页截图 API,如 page.screenshot() 将获取到的图片数据保存为文件或上传到服务器 可以通过设置视窗大小参数,获取不同尺寸的截图 针对动态内容,可以插入等待加载的代码,确保内容呈现完全后再截图 可以通过框架提供的能力模拟各种交互操作后再截图” |
 |
2
gy123 OP @fwin3001 首先感谢,我可能没描述清除,这个内嵌 iframe 的网页最后会分享给用户,然后用户在手机打开网页后自动截图上传服务器
|
 |
3
okakuyang 2023-07-18 17:40:15 +08:00 via iPhone
应该是跨域引起的，估计你没有正确反向代理到第三方网站的图片。解决方法也有，你需要修改 html2canvas 的代码，因为这个库在脚本中重新下载了图片，所以触发了跨域。会出现脏画布的情况。你可以修改库中下载图片部分的代码，下载下来数据 blob 后转成 base64 再赋给 img 对象这样你的图片就是本地的图片不再跨域。
|
|
4
gy123 OP @okakuyang 图片解决没问题,就是使用 iframe 加载第三方网页没法截图~类似这个 http://cdn.dns-detect.alicdn.com/
|
 |
5
dcsuibian 2023-07-18 18:53:23 +08:00
不行吧。不同源的第三方网页里显示的可以是用户的敏感信息。
如果你可以通过外边的 js 获取到并发回自己的服务器，这不妥妥的浏览器安全漏洞么。 很刑 |
 |
6
MossFox 2023-07-18 18:56:09 +08:00
是浏览器的限制，JavaScript 不可以获取跨域的内容。这是考虑到安全性的设计。
这种需求要么走桌面端浏览器才有的屏幕录制接口，要么就定制浏览器客户端吧。 |
 |
7
krapnik 2023-07-18 19:23:19 +08:00
|
Select Language