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