如何使用Javascript获取图片的宽度和高度？

问题描述：

我想根据图像宽度和高度仅从HTML DOM加载某些图像。如何使用Javascript获取图片的宽度和高度？

我不知道如何使用JavaScript访问图像的宽度和高度属性。

这必须在任何浏览器下运行。

我的应用程序是一个书签，因此所有图像都会在用户启动书签时加载。所以，我只会扫描DOM，获取所有img srv值，并使用它们。诀窍是我不想要所有的图像，只是符合我想要的尺寸的图像。

我有这样的代码，到目前为止，它得到所有从DOM图像：

var imgObj = document.getElementsByTagName('img'); 

for(var i=0;i<imgObj.length;i++) 
{ 
imgsList[i] = imgObj[i].getAttribute('src'); 
if(consoleLog)console.log(imgsList[i]); 
} 

return images = imgObj.length;

我的问题已经在这里解决：How to get image size (height & width) using JavaScript?

但我不知道如何去适应我的代码的img .clientWidth

它是imgsList [i] .clientWidth？

你是什么意思“仅加载HTML DOM中的某些图像”？你的图片加载了吗？ – 2012-07-17 12:21:18

是的，请写出答案;在那个地址，没有找到答案。 – 2012-07-17 12:22:07

是的，他们被加载，我需要重新加载，只有一些，基于图像的高度和宽度。 – 2012-07-17 12:22:58

答

imgObj[i].clientWidth,imgList包含仅仅src属性的列表。

使用图像的任何宽度和高度时，请谨慎使用，因为它们异步加载到浏览器中。这意味着当DOM加载时，宽度和高度将为0.只有在图像自己完成加载后，元素才会适当地设置宽度和高度。

为了解决这个问题，你可以有加载处理程序，当图像加载完成后，它将执行回调。

虽然有点奇怪的行为是缓存图像的浏览器不会再次调用这个加载函数（至少在jQuery中不是这样），所以你需要确保缓存版本你做了任何宽度检查DOM负载回调。

可以在标准的JavaScript然而，做到这一点作为一个例子，因为我有我的，我在工作的前一个jQuery例如早期我会告诉你如何能在jQuery中进行。

假设图像有id=imageid

function checkWidths() { 
    //do anything you want here 

    //jQuery uses the .width and .height functions to get the appropriate attributes of an element, these return a value without the px % etc. To get the actual css use .css('width') instead. 
} 

$(document).ready(function() { 
    if($('#imageid').width() > 0) 
     checkWidths(); 
}); 

$('#imageid').load(function() { 
    checkWidths(); 
}

我的应用程序是一个书签，所以所有图像将在用户启动书签时加载。所以，我只会扫描DOM，获取所有img srv值，并使用它们。诀窍是我不想要所有的图像，只是符合我想要的尺寸的图像。 – 2012-07-17 12:26:25

如果所有图像都已加载，那么只要DOM加载，您可以使用clientWidth属性检查它们的大小，如果您确信这些图像将被及时加载。我认为它仍然值得检查，因为小书签可能会在图像加载完成之前调用缓慢的连接。 – 2012-07-17 12:30:09

在checkWidth函数中，您可以检查其宽度和高度，并决定是否重新加载。 – 2012-07-17 12:32:29

答

要知道，图像的尺寸，你需要或者：

有加载图像（那么clientWidth是确定的，如果在执行脚本在负载回调中）
将它们指定为属性（<img src=... width=33>）。在这种情况下使用imgObj[i].getAttribute('width');

注意，如果要重新加载图像，并避免所有的缓存问题，最简单的是改变它的URL，例如像这样：

var srcbase = imgObj.getAttribute('src').split('?')[0]; 
imgObj.src = srcbase + '?time='+(new Date()).getTime();

（这个假设的图像由直到'？'的路径定义）

我可能没有宽度属性，img可能会在css文件中设置尺寸，或者不是。 – 2012-07-17 12:34:41

答

这就是它们，它的工作原理非常完美。

populateImgsList : function() 
    { 

    var imgObj = document.getElementsByTagName('img'); 

    var j = 0; 

    for(var i=0;i<imgObj.length;i++) 
    { 

    if(consoleLog)console.log('w '+imgObj[i].clientWidth+' h: '+imgObj[i].clientHeight); 

    if((imgObj[i].clientWidth>100) && (imgObj[i].clientHeight>100)) 
    { 

    imgsList[j] = imgObj[i].getAttribute('src'); 
    if(consoleLog)console.log(imgsList[j]); 

    j++; 

    } 

    } 

    return images = imgList; 

    },

如何使用Javascript获取图片的宽度和高度？

相关推荐