特定のDivを持つ画像をダウンロードするスクリプト

Question

それぞれに1つの画像をダウンロードする必要がある一連のURLがあります。これらの各ページのマークアップで

私は理想的な製品・ヒーローのクラスとdiv要素内の画像をダウンロードするか、画像のsrcタグを保存する必要があり、次の

<div class="subcolumns product-hero"> 
     <div class="c60l"> 
       <img src="Cubes.png" width="300"/> 
     </div> 
</div> 

あります。

これは何らかの自動化されたスクリプトによって可能ですか？ノード/ Perlなど？

Answer 1

Phantom.jsを使用すると、純粋なjavascript（ブラウザは必要ありません）でWebページを読み込んでクエリできます。

文書にアクセスする方法についてはPhantom's DOM Manipulationをご覧になり、必要な画像にアクセスするためにvanilla javascript domクエリ（getElementsByClassNameおよびgetElementsByTagNameなど）を使用することができます。だからあなたのスクリプトは次のようになります。

引数リストとしてURLのリストを考えると

var page = require('webpage').create(); 
console.log('The default user agent is ' + page.settings.userAgent); 
page.settings.userAgent = 'SpecialAgent'; 
page.open('http://www.httpuseragent.org', function (status) { 
    if (status !== 'success') { 
     console.log('Unable to access network'); 
    } else { 
     page.evaluate(function() { 
      var productHeros = document.getElementsByClassName('product-hero'); 
      for (var i = 0; i < productHeros.length; i++) { 
       var productHeroDiv = productHeros[i]; 
       var image = productHeroDiv.getElementsByTagName("img")[0]; 
       var source = image.src; 
      } 
     }); 
     console.log(ua); 
    } 
    phantom.exit(); 
}); 

Answer 2

：

#!/bin/bash 
for url in "$@"; do 
    img_src=$(curl -s "$url" | \ 
     xmllint 2>/dev/null --recover --html --xpath \ 
     'string(//div[contains(@class, 'product-hero')]/img/@src)' -) 
    curl -O "$(dirname "$url")/$img_src" 
done