使用PhantomJS刮图片src网址

Question

我试图让使用PhantomJS某个网页的所有图片src网址的列表。我的理解是，这应该是非常容易的，但不管是什么原因，我似乎无法使它工作。这是我目前拥有的代码：

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();
});

我也试着通过图像的评估功能迭代和取得的.src财产的方式。 他们没有返回任何有意义的东西。如果我回到document.images的长度，还有第54张图片，但试图通过它们进行迭代提供任何有用的。

另外，我看着下面的其他问题，是不能够使用他们提供的信息：How to scrape javascript injected image src and alt with phantom.js和How to download images from a site with 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。

由于docs say：

注：参数和返回值的评估函数必须是一个简单的原始对象。经验法则：如果可以通过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传播算子：这接通阵列喜好和iterables成阵列。使用像这样[...document.images]
2. 定期for环，像阵列。这利用以下事实：将密钥标记的像阵列的优势：

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

甚至更多，以及

使用解决方案1，您可以使用就可以了阵列功能，如map或reduce，但不太支持（IDK如果是JavaScript的幻影当前版本支持）。

Answer 4

我用下面的代码来获取加载网页上的所有图片，加载在浏览器上的图像变化的视口的基础上的尺寸，因为我想最大的尺寸，我用了最大的视口，以获得实际图像大小。

获得所有图像页上使用虚拟JS下载页面上的所有图像URL使用虚拟JS

无论即使图像不是在img标签下面的代码可以检索网址

---

即使从这样的脚本图像将被检索

            @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');
                }       
            }
        };