从网页中提取背景图片 / 解析HTML+CSS

Question

3

我正在使用Ruby on Rails开发一个分享网站，允许分享网页链接。

我想从每个页面中提取一些代表性的图片（就像在Facebook上分享链接时那样）。

目前，我使用opengraph gem首先解析og:image元标签，然后使用Nokogiri解析页面内容并检索所有<img>标签的src属性。这样可以得到良好的结果（除了一些装饰性图片外，所以我通过大小过滤结果...）。

--

现在，我想进一步解析css background-image属性：网站的徽标经常作为<h1>或<a>标签的背景显示。

我考虑以下过程：

... 并根据文档URL绝对化URL。

--

我的问题是：

您认为是否有更好的替代方案？
是否有任何一种库可以提高此过程的性能？

例如，如果我可以构建HTML+CSS的合并视图，允许我通过DOM访问CSS属性，我可以仅访问预选HTML元素（h1、a等）的背景图片，并限制结果数量。

- Thomas Guillory

实际上，显示的图像是在meta标签中使用属性og:image定义的，如果没有定义，则只使用img标签。 - noob

@micha 是的，我知道，我也解析它。但绝大多数网站都没有使用OpenGraph标签。 - Thomas Guillory

虽然我不太熟悉Ruby on Rails，但我会避免使用正则表达式来解析HTML或CSS。https://dev59.com/X3I-5IYBdhLWcg3wq6do#1732454 - Wex

@Wex 嗯，我同意，但根据this answer中的说法解析已知子集的HTML（而不是任意的HTML文档）是正则表达式的一个好用处。在我的情况下，我只想匹配/background：url（...）/，而不是嵌套标签。 - Thomas Guillory

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul McClean · Accepted Answer

当您解析网站的CSS时，任何您要获取的图片都将与用户界面（精灵、背景）相关，而不是页面的实际内容。

我认为除非您只想提取标志，否则这并不值得。在这种情况下，我会限制类名/标识符/路径中包含单词“logo”的匹配项。

如果您想从页面中提取“代表性图像”，那么我会像您正在做的那样解析图像标签，然后生成（并裁剪）页面的屏幕截图，如下所示：使用ruby和unix服务器如何对网页进行截屏？

您如何处理不在原始HTML源代码中的图像？

就库而言，我相信nokogiri是最好的选择。