如何使用javascript或jquery获取图片的自然尺寸？

我到目前为止这样的代码：如何使用javascript或jquery获取图片的自然尺寸？

var img = document.getElementById('draggable'); 
var width = img.clientWidth; 
var height = img.clientHeight;

然而，这让我的HTML属性 - CSS样式。我想获取文件的实际图像资源的尺寸。

我需要这个，因为在上传图片时，它的宽度设置为0px，我不知道为什么或者发生了什么。为了防止它，我想获得实际的维度并重置它们。这可能吗？

编辑：即使当我试图得到naturalWidth我得到0作为结果。我添加了一张照片。奇怪的是，它只发生在我上传新文件和刷新时，它应该像它应该那样工作。

http://oi39.tinypic.com/3582xq9.jpg

来源

2013-05-02 user1848605

看看[这里]（http://stackoverflow.com/a/626505/6190800 ）解决方案 – 2016-10-20 15:16:36

你可以使用naturalWidth和naturalHeight，这些属性包含图像的实际，未经修饰的宽度和高度，但你必须等待，直到图像加载，让他们

var img = document.getElementById('draggable'); 

img.onload = function() { 
    var width = img.naturalWidth; 
    var height = img.naturalHeight; 
}

这只是支持IE9及以上版本，如果您必须支持较旧的浏览器，您可以创建一个新的图像，将其源设置为相同的图像，并且如果您不修改图像的大小，它会返回图像的自然大小，如当没有其他尺寸时，这将是默认设置

var img  = document.getElementById('draggable'), 
    new_img = new Image(); 

new_img.onload = function() { 
    var width = this.width, 
     heigth = this.height; 
} 

new_img.src = img.src;

FIDDLE

来源

2013-05-02 16:20:24 adeneo

没有jQuery让我开心:-) – 2013-05-02 16:22:17

这解决了它，谢谢。包装我的代码jQuery.ready（）功能不够，因为图像没有被加载？仅当将新文件上传到服务器时，我遇到了这个问题。 – user1848605 2013-05-02 16:31:39

当jQuery DOM ready函数触发时，图像不会被加载，只有DOM准备就绪。 '$（window）.on（'load'）'将在所有内容加载时触发，但只需将onload事件处理程序直接附加到图像上会更好。 – adeneo 2013-05-02 16:33:41

有img.naturalHeight和img.naturalWidth，给你的宽度和图像本身的高度，而不是DOM元素。

来源

2013-05-02 16:18:57 mash

这是一个非常好的解决方案。 – SoonDead 2013-05-02 16:23:27

据我所知，它不能在IE8或更低版本中运行，也不能在Opera中运行。 – adeneo 2013-05-02 16:23:59

有趣。请注意，对于IE，这是针对IE9或更高版本的。我查了一会儿，偶然发现了这个为jQuery添加'.naturalHeight（）'和'.naturalWidth（）'的代码片段。只是想我可以在这里分享这个信息：http://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/ – 2013-05-02 16:25:02

您可以使用我所做的以下功能。

功能

function getImageDimentions(imageNode) { 
    var source = imageNode.src; 
    var imgClone = document.createElement("img"); 
    imgClone.src = source; 
    return {width: imgClone.width, height: imgClone.height} 
}

HTML：

<img id="myimage" src="foo.png">

使用这样

var image = document.getElementById("myimage"); // get the image element 
var dimentions = getImageDimentions(image); // get the dimentions 
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions

来源

2015-12-01 14:36:59 nathnolt

如何使用javascript或jquery获取图片的自然尺寸？

回答

相关问题