如何获得网页渲染后每个 DOM node 的位置

2021-10-18 12:52:55 +08:00
 clockwise9

请教一个问题,对于一个网页中的某个 DOM node,如何获取渲染之后的位置呢?比如按照 1920x1080 的分辨率来渲染,某个网页的渲染后实际像素数量是 1920x3000,标题对应的矩形框的左上和右下角分别是 (200, 200) 和 (1500, 400),正文对应的框的左上角和右下角分别是 (200, 500) 和 (1500, 2500) 这样。

如果能够用 headless 的方法渲染网页然后获取上述信息的话,或许可以训练个模型什么的,比如预测标题和正文对应的 DOM node,或者预测哪些 DOM node 贡献了可见的内容。如果想训练这种模型的话,可能还需要更进一步来标注数据,把网页渲染成图片之后把特定的 DOM node 高亮出来(比如画个框),然后根据对应的任务进行人工标注。

1200 次点击
所在节点    问与答
10 条回复
runze
2021-10-18 13:06:36 +08:00
getBoundingClientRect
Pastsong
2021-10-18 13:15:34 +08:00
你们怎么干什么都想训练个模型,浪费电吗
mekingname
2021-10-18 13:49:23 +08:00
实际上我已经写好了,你可以看我的代码:

https://v2ex.com/t/806234#reply10
clockwise9
2021-10-18 13:56:17 +08:00
@runze 感谢!这个函数返回的 viewport 就是我想要的,网上搜了一下似乎可以在 CapserJS 里面搞,我去继续学习一下
clockwise9
2021-10-18 13:57:40 +08:00
@Pastsong 求不打脸,训练模型我都搞不利索,别的就更不会了。。。
clockwise9
2021-10-18 14:03:05 +08:00
@mekingname 感谢分享,我之前就想,基于 HTML 内容和结构的抽取方法应该有比较成熟的开源方案了,果然如此。所以我更想尝试一些不一样的东西,如果用模型把位置信息和内容结合在一起,可能会有更多的火花。
mekingname
2021-10-18 17:32:41 +08:00
@clockwise9 是的,所以最新版本里面我就是这样做的。
loading
2021-10-18 17:37:30 +08:00
看来以后看到“训练模型”字眼的东西,基本和“大数据”一样,也是忽悠人的,实际那人可以说是业余得很。
clockwise9
2021-10-19 14:48:25 +08:00
@mekingname 我只在 ContentExtractor.py 里面看到 “正文块的高度应该要大于 150px” 的逻辑,还有别的地方用了位置信息吗?有的话求明示,谢谢!
mekingname
2021-10-19 15:35:31 +08:00
@clockwise9 已经更新的代码只有这里。还有一些其它位置信息,代码还在我电脑上没有更新。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/808519

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX