从DOM获取Nokogiri的背景图像

Question

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

有没有办法在不使用幻影或哨兵的情况下通过 Nokogiri 获得这些属性.js？背景图像实际上使用内联样式，所以我应该可以。

我必须从一系列 URL 中获取图像：

<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 客户端来检索图像。