Получите фоновое изображение с Nokogiri из DOM?

Question

Я соскабливаю сайт, и я не могу получить изображения, потому что они загружены с помощью фонового изображения CSS.

Есть ли способ получить эти атрибуты с помощью Nokogiri без использования Phantom.js или Sentinel? Фоновое изображение на самом деле использует встроенные стили, поэтому я должен иметь возможность.

Я должен получить изображения из массива 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> 

Я использую Nokogiri через Mechanize, но не знаю, как написать это правильно:

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

Answer 1

Я d используйте что-то вроде:

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-клиентов для получения изображений.