javascript 调整大小后获取实际图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10478649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get actual image size, after resizing it
提问by Novak
I have a page filled with thumbnails, resized with css to 150x150, and when I click on a thumbnail, the page dims, and The image is being shown in it's true sizes.
我有一个充满缩略图的页面，用 css 调整大小150x150，当我单击缩略图时，页面变暗，并且图像以其真实大小显示。
Currently, I have to manually create an array that includes the actual height of all images. For solving a design issue+less manual operation of my gallery, I need to get the actual height of an image, after I resized it (CSS).
目前，我必须手动创建一个包含所有图像实际高度的数组。为了解决我的画廊的设计问题+更少的手动操作，我需要在调整图像大小（CSS）后获取图像的实际高度。
I tried:
我试过：
var imageheight = document.getElementById(imageid).height;
And:
和：
var imageheight = $('#' + imageid).height();
But both return the 150pxattribute assigned with the CSS. How can I solve this? Thanks
但两者都返回150px由 CSS 分配的属性。我该如何解决这个问题？谢谢
回答by Dinesh Gajbhiye
you have the 'natural' kws to help you out:
你有“自然”的知识来帮助你：
with js:
与js：
var imageheight = document.getElementById(imageid).naturalHeight;
or with jquery
或使用 jquery
var imageheight = $('#' + imageid).naturalHeight;
回答by Joseph
One way you could do it is create a separate image object.
一种方法是创建一个单独的图像对象。
function getImageDimensions(path,callback){
var img = new Image();
img.onload = function(){
callback({
width : img.width,
height : img.height
});
}
img.src = path;
}
getImageDimensions('image_src',function(data){
var img = data;
//img.width
//img.height
});
That way, you'll use the same image but not the one on the DOM, which has modified dimensions. Cached images, as far as i know, will be recycled using this method. So no worries about additional HTTP requests.
这样，您将使用相同的图像，但不会使用 DOM 上已修改尺寸的图像。据我所知，缓存的图像将使用这种方法回收。所以不用担心额外的 HTTP 请求。
回答by Anupam
@Dinesh's answer to just use the naturalHeightand naturalWidthproperty is great and probably should be the accepted answer.
@Dinesh 仅使用naturalHeightandnaturalWidth属性的答案很好，可能应该是公认的答案。
Just wanted to add two things here that could save people hours since I see many SO posts around this issue and have myself spent quite sometime on it.
只是想在这里添加两件可以节省人们时间的东西，因为我看到很多关于这个问题的 SO 帖子并且我自己花了很多时间在它上面。
naturalHeightmay return0orundefinedif called before the image is loaded. Just settingsrcattribute may not mean that the image is loaded immediately. I have seen that it is best to fetch it inonload.$('selector')[0].onload = function() { alert(this.naturalHeight); alert(this.naturalWidth); }If not using
this, just$('selector').naturalHeightmay not work. You may need to access the associated DOM element i.e$('selector')[0].naturalHeightor$('selector').get(0).naturalHeightsince we are using native Javascript's attributenaturalHeight. See this SO postfor more details.
naturalHeight可能会返回0或undefined在图像加载之前调用。仅设置src属性可能并不意味着立即加载图像。我已经看到最好在onload.$('selector')[0].onload = function() { alert(this.naturalHeight); alert(this.naturalWidth); }如果不使用
this，$('selector').naturalHeight可能无法正常工作。您可能需要访问关联的 DOM 元素，即$('selector')[0].naturalHeight或者$('selector').get(0).naturalHeight因为我们使用的是原生 Javascript 的属性naturalHeight。有关更多详细信息，请参阅此 SO 帖子。
