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

访问PhantomJS中的图像尺寸

1 个答案: