html - 从 DOM 使用 Nokogiri 获取背景图像？

Question

我正在抓取一个网站，但我无法获取图像，因为它们加载了背景图像 CSS。

有没有办法在不使用 Phantom.js 或 Sentinel 的情况下使用 Nokogiri 获取这些属性？背景图片实际上使用了内联样式，所以我应该可以。

我必须从一组 URLS 中获取图像:

<div class="zoomLens" style="background-image: url(http://resources1.okadirect.com/assets/en/new/catalogue/1200x1200/EHD005MET-L_01.jpg?version=7); background-position: -14.7368421052632px -977.894736842105px; background-repeat: no-repeat;">&nbsp;</div>

我通过 Mechanize 使用 Nokogiri，但不知道如何正确编写:

image = agent.get(doc.parser.at('.zoomLens')["background-image"]).save("okaimages/f_deco-#{counter}.jpg")

Answer 1

我会使用类似的东西:

require 'nokogiri'

doc = Nokogiri::HTML('<div class="zoomLens" style="background-image: url(http://resources1.okadirect.com/assets/en/new/catalogue/1200x1200/EHD005MET-L_01.jpg?version=7); background-position: -14.7368421052632px -977.894736842105px; background-repeat: no-repeat;">&nbsp;</div>')

doc.search('.zoomLens').map{ |n| n['style'][/url\((.+)\)/, 1] }
# => ["http://resources1.okadirect.com/assets/en/new/catalogue/1200x1200/EHD005MET-L_01.jpg?version=7"]

技巧是获取括号内容的适当模式。 n['style'][/url\((.+)\)/, 1] 使用 String#[]它可以采用带分组的正则表达式，并从捕获中返回特定的组。参见 https://www.regex101.com/r/mV6rY6/1了解其功能的分割。

那时您将坐在一组图像 URL 上。您可以轻松地遍历列表并使用 OpenURI 或任意数量的其他 HTTP 客户端来检索图像。