使用PhantomJS刮取圖像src URL

Question

我正在嘗試使用PhantomJS獲取給定網頁中所有圖像src url的列表。 我的理解是，這應該是非常容易的，但無論出於何種原因，我似乎無法使其發揮作用。 這是我目前的代碼：

var page = require('webpage').create();
page.open('http://www.walmart.com');

page.onLoadFinished = function(){
    var images = page.evaluate(function(){
        return document.getElementsByTagName("img");
    });
    for(thing in a){
        console.log(thing.src);
    }
    phantom.exit();
}

我也試過這個：

var a = page.evaluate(function(){
    returnStuff = new Array;
    for(stuff in document.images){
        returnStuff.push(stuff);
    }
    return returnStuff;
});

和這個：

var page = require('webpage').create();
page.open('http://www.walmart.com', function(status){
    var images = page.evaluate(function() {
        return document.images;
    });
    for(image in images){
        console.log(image.src);
    }
    phantom.exit();
});

我也試過遍歷evaluate函數中的圖像並以這種方式獲取.src屬性。
他們都沒有任何有意義的回報。 如果我返回document.images的長度，頁面上有54個圖像，但嘗試迭代它們沒有任何用處。

此外，我已經查看了以下其他問題，並且無法使用他們提供的信息： 如何使用phantom.js刮取javascript注入圖像src和alt以及如何 使用phantomjs 從網站下載圖像

再次，我只想要源URL。 我不需要實際的文件本身。 謝謝你的幫助。

UPDATE
我試過用

var a = page.evaluate(function(){
    returnStuff = new Array;
    for(stuff in document.images){
        returnStuff.push(stuff.getAttribute('src'));
    }
    return returnStuff;
});

它拋出一個錯誤，說stuff.getAttribute（'src'）返回undefined。 知道為什么會這樣嗎？

Answer 1

@MayorMonty幾乎就在那里。 確實你不能返回HTMLCollection。

正如文檔所說 ：

注意：evaluate函數的參數和返回值必須是一個簡單的原始對象。 經驗法則：如果它可以通過JSON序列化，那么它很好。

閉包，函數，DOM節點等不起作用！

因此工作腳本是這樣的：

var page = require('webpage').create();

page.onLoadFinished = function(){

    var urls = page.evaluate(function(){
        var image_urls = new Array;
        var images = document.getElementsByTagName("img");
        for(q = 0; q < images.length; q++){
            image_urls.push(images[q].src);
        }
        return image_urls;
    });    

    console.log(urls.length);
    console.log(urls[0]);

    phantom.exit();
}

page.open('http://www.walmart.com');

Answer 2

我不確定直接的JavaScript方法，但最近我使用jQuery來抓取圖像和其他數據，這樣你就可以在注入jQuery之后用下面的樣式編寫腳本

$('.someclassORselector').each(function(){
     data['src']=$(this).attr('src');
   });

Answer 3

document.images不是節點的數組，它是一個HTMLCollection ，它是由Object構建的。 你可以看到這一點，如果你for..in它：

for (a in document.images) {
  console.log(a)
}

打印：

0
1
2
3
length
item
namedItem

現在，有幾種方法可以解決這個問題：

1. ES6 Spread Operator：這將數組和迭代變成數組。 像這樣使用[...document.images]

2. 定期for環，像陣列。 這利用了鍵被標記為數組的事實：

    for(var i = 0; i < document.images.length; i++) { document.images[i].src } 

也許還有更多

使用解決方案1允許您在其上使用數組函數，如map或reduce ，但支持較少（如果幻影中當前版本的javascript支持idk，則為idk）。

Answer 4

我使用以下代碼來加載頁面上的所有圖像，瀏覽器上加載的圖像根據視圖端口改變尺寸，因為我想要最大尺寸我使用最大視圖端口來獲取實際圖像尺寸。

使用Phantom JS獲取頁面上的所有圖像使用Phantom JS下載頁面上的所有圖像URL

沒有問題，即使圖像不在代碼下面的img標簽中，您也可以檢索URL

---

甚至將檢索來自此類腳本的圖像

            @media screen and (max-width:642px) {
                .masthead--M4.masthead--textshadow.masthead--gradient.color-reverse {
                    background-image: url(assets/images/bg_studentcc-750x879-sm.jpg);
                }
            }
            @media screen and (min-width:643px) {
                .masthead--M4.masthead--textshadow.masthead--gradient.color-reverse {
                    background-image: url(assets/images/bg_studentcc-1920x490.jpg);
                }
            }

---

        var page =  require('webpage').create();
        var url = "https://......";

        page.settings.clearMemoryCaches = true;
        page.clearMemoryCache();
        page.viewportSize = {width: 1280, height: 1024};

        page.open(url, function (status) { 

            if(status=='success'){      
                console.log('The entire page is loaded.............################');
            }
        });

        page.onResourceReceived = function(response) {      
            if(response.stage == "start"){
                var respType = response.contentType;

                if(respType.indexOf("image")==0){           
                    console.log('Content-Type : ' + response.contentType)
                    console.log('Status : ' + response.status)
                    console.log('Image Size in byte : ' + response.bodySize)
                    console.log('Image Url : ' + response.url)
                    console.log('\n');
                }       
            }
        };