如何使用JavaScript获取图像大小(高度和宽度)?


Answers:


792

您可以使用Javascript以编程方式获取图像并检查尺寸...

var img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

如果图像不是标记的一部分,这将很有用。


4
@ blo0p3r-在此之前不需要将图像加载到DOM中。它加载图像,并触发onload以提供尺寸。顺便说一句-最好的答案在这里!
维克

我希望您也可以使用XMLHttpRequest对象来执行此操作。
PHearst

如何将此代码用于多个(数组)图像?可能需要将其与此处的最佳答案结合起来:stackoverflow.com/questions/4288759/…
Kozuch 2013年

这里提供多张图片的解决方案:stackoverflow.com/questions/19269834/…–
Kozuch

2
img.onerror = function(){alert(0); //未找到处理程序}
无限isa

437

clientWidthclientHeight是DOM属性,它们显示DOM元素的内部尺寸(不包括边距和边框)的当前浏览器内部大小。因此,对于IMG元素,这将获得可见图像的实际尺寸。

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

33
@Nicky完全正确。它给出了在该实例中渲染的图像的尺寸。
Rex M

8
@ Mat-visual $.fn.width$.fn.height
yckart

202
正确的答案是使用img.naturalWidth和img.naturalHeight
Octopus

5
document.getElementById比的打字时间长,但快10倍$('#...')[0]
bfontaine 2014年

17
@RexM在Chrome 35上,速度提高了16倍:jsperf.com/document-getelementbyid-vs-jquery/5
bfontaine 2014年

335

另外(除了Rex和Ian的答案),还有:

imageElement.naturalHeight

imageElement.naturalWidth

它们提供了图像文件本身的高度和宽度(而不仅仅是图像元素)。


15
IE9和所有现代Web浏览器现在都支持此功能。
亚伦

图像尚未完成加载时,将获得0x0。
英国广播公司

1
我使用的是chrome,这仅在页面加载后dom中的图像大小不变的情况下有效。
Jonathan Czitkovics

是的...这就是我的工作。然后,如果之后,“自然宽度”或高度以NaNs的形式返回,我将从上一个答案恢复为其他方法(将图像作为新的Image()再次获取,然后在onload事件中获取其宽度和高度)。速度较慢,但​​可以在IE8等旧版浏览器中使用。–
Randy


109

如果您使用的是jQuery,但您要求的是图片大小,则必须等待它们加载,否则您将只能得到零。

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

负载处理器中是否始终提供宽度和高度?
AndersLindén2014年

@AndersLindén-请参阅Akseli为load事件添加的墨水。有一个专门的部分专门讨论图像。技术回答是“否”,但是实际上,我从未对使用此方法的网站有任何疑问。
mrtsherman 2014年

但是,如果技术答案是否定的,那么它无法使用吗?是不是
AndersLindén2014年

可以在加载图像之前获取图像属性吗?
否,

98

我认为对这些答案进行更新很有用,因为最clientWidth受好评的答复之一是建议使用and clientHeight,我认为它已经过时了。

我已经对HTML5进行了一些实验,以查看实际上返回了哪些值。

首先,我使用了一个名为Dash的程序来获取图像API的概述。它指出heightwidth是图像的渲染高度/宽度,naturalHeight以及naturalWidth是的固有高度/宽度(并且仅HTML5)。

我使用了一个美丽的蝴蝶的图像,该图像来自高度为300且宽度为400的文件。

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

然后,我将此HTML和内联CSS用作高度和宽度。

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

结果:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

然后,我将HTML更改为以下内容:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

即使用高度和宽度属性,而不是内联样式

结果:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

然后,我将HTML更改为以下内容:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

即同时使用属性和CSS,以查看哪个优先。

结果:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

1
您为什么认为clientHeight已过时?
Cactux

64

使用JQuery,您可以执行以下操作:

var imgWidth = $("#imgIDWhatever").width();

63
如果图像尚未加载?
James Westgate

11
并且图像是否在div的background属性中?:)
NDM

3
@JamesWestgate如果尚未加载图像,则无法确定其实际大小。但是,您可以尝试读取元素的widthheight属性img
蒂姆(Tim)

@Tim您可以在后台加载它,当它的加载,你可以有它的尺寸
ODYS

26

其他人忘记的是,您无法在加载图像之前检查图像尺寸。当作者检查所有发布的方法时,它可能只能在localhost上工作。由于可以在此处使用jQuery,因此请记住,在加载图像之前会触发“就绪”事件。$('#xxx')。width()和.height()应该在onload事件或更高版本中触发。


9
发布一些更新的代码,您可能会被投票甚至获得令人垂涎的逆转徽章!
詹姆斯·韦斯特盖特

1
@Thinker,请提供您的解决方案,因为您的分析似乎正确。
a20

5
这不是答案。只是对其他答案的评论。
jeffdill2'4

20

您只能使用load事件的回调来真正做到这一点,因为在实际完成加载之前,图像的大小是未知的。类似于下面的代码...

var imgTesting = new Image();

function CreateDelegate(contextObject, delegateMethod)
{
    return function()
    {
        return delegateMethod.apply(contextObject, arguments);
    }
}

function imgTesting_onload()
{
    alert(this.width + " by " + this.height);
}


imgTesting.onload = CreateDelegate(imgTesting, imgTesting_onload);
imgTesting.src = 'yourimage.jpg';

1
在jquery中,您可以为此使用$ .proxy。
Jochem Van Der Spek

9

使用jQuery库-

使用.width().height()

有关jQuery宽度jQuery Heigth的更多信息

示例代码-

$(document).ready(function(){
    $("button").click(function()
    {
        alert("Width of image: " + $("#img_exmpl").width());
        alert("Height of image: " + $("#img_exmpl").height());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<img id="img_exmpl" src="http://images.all-free-download.com/images/graphicthumb/beauty_of_nature_9_210287.jpg">
<button>Display dimensions of img</button>


8

好的,我认为我改进了源代码,以便能够在尝试查找图像的属性之前加载图像,否则它将显示“ 0 * 0”,因为在将文件加载到其中之前将调用下一条语句浏览器。需要jquery ...

function getImgSize(imgSrc){
    var newImg = new Image();
    newImg.src = imgSrc;
    var height = newImg.height;
    var width = newImg.width;
    p = $(newImg).ready(function(){
        return {width: newImg.width, height: newImg.height};
    });
    alert (p[0]['width']+" "+p[0]['height']);
}

8

假设我们要获得 <img id="an-img" src"...">

// Query after all the elements on the page have loaded.
// Or, use `onload` on a particular element to check if it is loaded.
document.addEventListener('DOMContentLoaded', function () {
  var el = document.getElementById("an-img");

  console.log({
    "naturalWidth": el.naturalWidth, // Only on HTMLImageElement
    "naturalHeight": el.naturalHeight, // Only on HTMLImageElement
    "offsetWidth": el.offsetWidth,
    "offsetHeight": el.offsetHeight
  });

自然尺寸

el.naturalWidthel.naturalHeight获得自然尺寸,即图像文件的尺寸。

布局尺寸

el.offsetWidth并且el.offsetHeight将让我们在该元素在文档呈现的尺寸。


4
只是赞扬提供有用内容的现有答案;不要将其中的几个复制到新的文件中;然后,您只是在复制内容。
TylerH

7

在使用实际图像尺寸之前,您应该加载源图像。如果使用JQuery框架,则可以通过简单的方法获得实际的图像大小。

$("ImageID").load(function(){
  console.log($(this).width() + "x" + $(this).height())
})

7

这个答案正是我在jQuery中寻找的:

var imageNaturalWidth = $('image-selector').prop('naturalWidth');
var imageNaturalHeight = $('image-selector').prop('naturalHeight');

5

imageDimensions()如果您不担心使用诺言,则可以使用以下简单函数()。

// helper to get dimensions of an image
const imageDimensions = file => new Promise((resolve, reject) => {
    const img = new Image()

    // the following handler will fire after the successful parsing of the image
    img.onload = () => {
        const { naturalWidth: width, naturalHeight: height } = img
        resolve({ width, height })
    }

    // and this handler will fire if there was an error with the image (like if it's not really an image or a corrupted one)
    img.onerror = () => {
        reject('There was some problem with the image.')
    }
    
    img.src = URL.createObjectURL(file)
})

// here's how to use the helper
const getInfo = async ({ target: { files } }) => {
    const [file] = files
 
    try {
        const dimensions = await imageDimensions(file)
        console.info(dimensions)
    } catch(error) {
        console.error(error)
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.0.0-beta.3/babel.min.js"></script>

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>
<br />
<small>It works offline.</small>



3

认为这可能对某些在2019年使用Javascript和/或Typescript的人有所帮助。

我发现有些建议是错误的:

let img = new Image();
img.onload = function() {
  console.log(this.width, this.height) // Error: undefined is not an object
};
img.src = "http://example.com/myimage.jpg";

这是对的:

let img = new Image();
img.onload = function() {
  console.log(img.width, img.height)
};
img.src = "http://example.com/myimage.jpg";

结论:

在功能中使用img,而不是。thisonload


上面的img.src有一个错字,应该是“ not:我试图编辑它,但是不能因为:”“编辑必须至少包含6个字符;这篇文章中还有其他要改进的地方吗?”否则,一个非常简单的解决方案就可以很好地工作!
user2677034

感谢@ user2677034的注意。我没看到 我会怪苹果的键盘。开玩笑...这可能是我的错。; P
布赖恩

2

最近,flex滑块出现错误,我遇到了同样的问题。由于加载延迟,第一张图像的高度设置得较小。我尝试了以下方法来解决该问题,并且已成功。

// create image with a reference id. Id shall be used for removing it from the dom later.
var tempImg = $('<img id="testImage" />');
//If you want to get the height with respect to any specific width you set.
//I used window width here.
tempImg.css('width', window.innerWidth);  
tempImg[0].onload = function () {
    $(this).css('height', 'auto').css('display', 'none');
    var imgHeight = $(this).height();
    // Remove it if you don't want this image anymore.
    $('#testImage').remove();
}
//append to body
$('body').append(tempImg);
//Set an image url. I am using an image which I got from google.
tempImg[0].src ='http://aspo.org/wp-content/uploads/strips.jpg';

这将使您相对于您设置的宽度而不是原始宽度或零的高度。


1

您还可以使用:

var image=document.getElementById("imageID");
var width=image.offsetWidth;
var height=image.offsetHeight;

1

Nicky De Maeyer询问背景图片;我只是从CSS中获取并替换了“ url()”:

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

使用jQuery时,我从不了解使用正则表达式。由于jQuery会为您规范化属性,因此您可以通过使用s.substr(4,s.length-5)它来摆脱困境,这至少在眼睛上更容易;)
Jonas Schubert Erlandsson

1

当页面在js或jquery中加载时,您可以应用onload handler属性,如下所示:

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

1

简单来说,您可以像这样进行测试。

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

0
var img = document.getElementById("img_id");
alert( img.height + " ;; " + img .width + " ;; " + img .naturalHeight + " ;; " + img .clientHeight + " ;; " + img.offsetHeight + " ;; " + img.scrollHeight + " ;; " + img.clientWidth + " ;; " + img.offsetWidth + " ;; " + img.scrollWidth )
//But all invalid in Baidu browser  360 browser ...

0

重要的是从父div中删除浏览器解释的设置。因此,如果您想要真实的图像宽度和高度,则可以使用

$('.right-sidebar').find('img').each(function(){
    $(this).removeAttr("width");
    $(this).removeAttr("height");
    $(this).imageResize();
});

这是我的一个TYPO3项目示例,在这里我需要图像的真实属性以正确的关系缩放它。


0
var imgSrc, imgW, imgH;
function myFunction(image){
    var img = new Image();
    img.src = image;
    img.onload = function() {   
        return {
            src:image,
            width:this.width,
            height:this.height};
        }
    return img;
}
var x = myFunction('http://www.google.com/intl/en_ALL/images/logo.gif');
    //Waiting for the image loaded. Otherwise, system returned 0 as both width and height.
x.addEventListener('load',function(){
    imgSrc = x.src;
    imgW = x.width;
    imgH = x.height;
});
x.addEventListener('load',function(){
    console.log(imgW+'x'+imgH);//276x110
});
console.log(imgW);//undefined.
console.log(imgH);//undefined.
console.log(imgSrc);//undefined.

这是我的方法,希望对您有所帮助。:)


0
function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

这项工作用于多幅图像的预览和上传。如果必须为每个图像一个一个地选择。然后复制并粘贴到所有预览图像功能中并进行验证!!!


0

在获取元素的属性之前,文档页面应处于加载状态:

window.onload=function(){
    console.log(img.offsetWidth,img.offsetHeight);
}

0

只需传递输入元素获得的img文件对象(当我们选择正确的文件时),它将给出图像的净高度和宽度

function getNeturalHeightWidth(file) {
     let h, w;
     let reader = new FileReader();
      reader.onload = () => {
        let tmpImgNode = document.createElement("img");
        tmpImgNode.onload = function() {
          h = this.naturalHeight;
          w = this.naturalWidth;
        };
        tmpImgNode.src = reader.result;
      };
      reader.readAsDataURL(file);
    }
   return h, w;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.