phantomjs - 在 PhantomJS 中访问图像尺寸

Question

我正在尝试查找页面正在下载的图像的大小；显而易见的解决方案是，

var imgs = [];
var imgTags = document.getElementsByTagName('img');
for (i = 0; i < imgTags.length; i++) {
    var img = imgTags[i];
    imgs.push({src: img.src, h: img.height, w: img.width});
}

但这只会检索渲染的大小——例如，普遍存在的spacer.gif将是 1x4、4x4 等，而它显然是 1x1。

此外，那种文档扫描似乎无法挑选下载的图像，但未在img标签中使用：CSS、背景等。

基于 WebKit 的浏览器中的检查器似乎非常有能力呈现预览——它是从哪里获取的？

Answer 1

希望有两个重要的属性：naturalWidth 和 naturalHeight (doc here )

这是一个示例脚本（stackoverflow 的第一张图片）

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

page.open(url, function(status) {
    var first_image_dim = page.evaluate(function() {
        return {width :$('img')[0].naturalWidth, height:$('img')[0].naturalHeight};
    });

    console.log(JSON.stringify(first_image_dim));
    phantom.exit();
});