Erhalten Sie ein Hintergrundbild mit Nokogiri von DOM?

Question

Ich kratze eine Seite und ich kann die Bilder nicht bekommen, weil sie mit Background-Image CSS geladen sind.

Gibt es eine Möglichkeit, diese Attribute mit Nokogiri zu erhalten, ohne Phantom.js oder Sentinel verwenden zu müssen? Das Hintergrundbild verwendet eigentlich Inline-Stile, also sollte ich das können.

Ich muss Bilder erhalten aus einem Array von 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> 

I Nokogiri über Mechanize bin mit, aber nicht wissen, wie diese richtig schreiben:

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

Answer 1

I‘ d Verwenden Sie etwas wie:

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"] 

Der Trick ist das entsprechende Muster, um den Inhalt der Klammer zu greifen. n['style'][/url\((.+)\)/, 1] verwendet String#[], die einen regulären Ausdruck mit Gruppierung annehmen und eine bestimmte Gruppe aus den Captures zurückgeben kann. Eine Zusammenfassung dessen, was es tut, finden Sie unter https://www.regex101.com/r/mV6rY6/1.

An diesem Punkt würden Sie auf einer Reihe von Bild-URLs sitzen. Sie können einfach über die Liste iterieren und OpenURI oder eine beliebige Anzahl anderer HTTP-Clients zum Abrufen der Bilder verwenden.