Question

是否有任何jQuery或纯JS API或方法来获取页面上图像的尺寸？

Answer 1

您可以使用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';

如果图像不是标记的一部分，这可能很有用。

Answer 2

clientWidth和clientHeight是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;

Answer 3

此外（除了雷克斯和伊恩的答案）还有：

imageElement.naturalHeight

和

imageElement.naturalWidth

这些提供了图像文件本身的高度和宽度（而不仅仅是图像元素）。

Answer 4

如果你正在使用jQuery，并且要求图像大小，你必须等到它们加载，否则你只会得到零。

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

Answer 5

我认为这些答案的更新很有用，因为其中一个投票最好的回复建议使用clientWidth和clientHeight，我认为现在已经过时了。

我已经使用HTML5进行了一些实验，以查看实际返回的值。

首先，我使用了一个名为Dash的程序来概述图像API。它指出height和width是图像的渲染高度/宽度，naturalHeight和naturalWidth是图像的固有高度/宽度（仅限HTML5））。

我使用了一张漂亮的蝴蝶图片，来自一个高度为300，宽度为400的文件。这个Javascript：

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

Answer 6

使用JQuery，你可以这样做：

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

Answer 7

所有其他人都忘记的事情是你无法在加载之前检查图像大小。当作者检查所有发布的方法时，它可能只在localhost上工作。由于jQuery可以在这里使用，请记住在加载图像之前触发'ready'事件。 $（'＃xxx'）。width（）和.height（）应该在onload事件或更高版本中触发。

Answer 8

你只能使用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';

Answer 9

使用jQuery库 -

使用.width()和.height()。

jQuery width和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>

Answer 10

好的家伙，我认为我改进了源代码，以便能够在尝试查找其属性之前加载图像，否则它将显示“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']);
}

Answer 11

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

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

Answer 12

This回答正是我所寻找的（在jQuery中）：

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

Answer 13

获取自然高度和宽度：

document.querySelector("img").naturalHeight;
document.querySelector("img").naturalWidth;

<img src="img.png">

如果你想获得样式的高度和宽度：

document.querySelector("img").offsetHeight;
document.querySelector("img").offsetWidth;

Answer 14

JQuery答案：

$height = $('#image_id').height();
$width  = $('#image_id').width();

Answer 15

简单地说，你可以这样测试。

  <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>

Answer 16

您也可以使用：

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

Answer 17

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 ...

Answer 18

我在 jquery 中的两分钱

免责声明：这不一定能回答这个问题，但可以扩展我们的能力。在 jQuery 3.3.1 中测试和工作

让我们考虑：

你有图片的 url/path 并且你想获得图片的宽度和高度而不在 DOM 上渲染它，
在DOM上渲染图像之前，需要设置offsetParent节点或图像div包装元素为图像宽度和高度，为不同的图像尺寸创建流体包装，即当点击按钮在一个视图上查看图像时模态/灯箱

这就是我要做的：

// image path
const imageUrl = '/path/to/your/image.jpg'

// Create dummy image to get real width and height
$('<img alt="" src="">').attr("src", imageUrl).on('load', function(){
    const realWidth = this.width;
    const realHeight = this.height;
    alert(`Original width: ${realWidth}, Original height: ${realHeight}`);
})

Answer 19

这是Node.js的替代答案，这不太可能是OP的含义，但可以派上用场，并且似乎在问题的范围之内。

这是Node.js的解决方案，该示例使用Next.js框架，但可以与任何Node.js框架一起使用。它使用probe-image-size NPM程序包从服务器端解析图像属性。

用例示例：我使用以下代码从Airtable Automation脚本解析图像的大小，该脚本调用了我自己的analyzeImage API，并返回了图像的道具。

import {
  NextApiRequest,
  NextApiResponse,
} from 'next';
import probe from 'probe-image-size';

export const analyzeImage = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const result = await probe('http://www.google.com/intl/en_ALL/images/logo.gif');

    res.json(result);
  } catch (e) {
    res.json({
      error: true,
      message: process.env.NODE_ENV === 'production' ? undefined : e.message,
    });
  }
};

export default analyzeImage;

收益：

{
"width": 276,
"height": 110,
"type": "gif",
"mime": "image/gif",
"wUnits": "px",
"hUnits": "px",
"length": 8558,
"url": "http://www.google.com/intl/en_ALL/images/logo.gif"
}

Answer 20

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

Answer 21

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.

这是我的方法，希望对您有所帮助。：）

Answer 22

您可以在js或jquery中加载页面时应用onload处理程序属性，如下所示： -

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

 });

Answer 23

最近我对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';

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

Answer 24

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

这项工作用于多个图像预览和上传。如果你必须逐个选择每个图像。然后复制并过去进入所有预览图像功能并验证!!!

Answer 25

在获取元素的属性之前，文档页面应该是onload：

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

Answer 26

如果不害怕使用Promises，您可以使用类似以下的简单功能（imageDimensions()。

const imageDimensions = file => new Promise((resolve, reject) => {
  try {
    const img = new Image()    
    img.onload = () => {
      const { naturalWidth: width, naturalHeight: height } = img
      resolve({ width, height })
    }
    img.onerror = () => {
      reject('There was some problem during the image loading')
    }
    img.src = URL.createObjectURL(file)
  } catch (error) {
    reject(error)
  }
})

const getInfo = ({ target: { files } }) => {
 const [file] = files
 imageDimensions(file)
   .then(result => {
     console.info(result)
   })
   .catch(error => {
     console.error(error)
   })
}

Select an image:
<input
  type="file"
  onchange="getInfo(event)"
/>

Answer 27

这对于某些在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之后使用this，而不是onload。

Answer 28

只要传递由输入元素获得的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;
}

Answer 29

也许这会帮助别人。就我而言，我有一个File类型（保证是图像），并且我希望图像尺寸不加载到DOM上。

一般策略：将File转换为ArrayBuffer->将ArrayBuffer转换为base64字符串->将其用作带有Image类的图像源->使用{{ 1}}和naturalHeight来获取尺寸。

naturalWidth

这使您无需渲染即可从const fr = new FileReader(); fr.readAsArrayBuffer(image); // image the the 'File' object fr.onload = () => { const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer; // Convert to base64. String.fromCharCode can hit stack overflow error if you pass // the entire arrayBuffer in, iteration gets around this let binary = ''; const bytes = new Uint8Array(arrayBuffer); bytes.forEach(b => binary += String.fromCharCode(b)); const base64Data = window.btoa(binary); // Create image object. Note, a default width/height MUST be given to constructor (per // the docs) or naturalWidth/Height will always return 0. const imageObj = new Image(100, 100); imageObj.src = `data:${image.type};base64,${base64Data}`; imageObj.onload = () => { console.log(imageObj.naturalWidth, imageObj.naturalHeight); } }获取所有图像尺寸和纵横比。可以使用File轻松地将onload函数转换为RxJS Observables，以获得更好的异步体验：

fromEvent

Answer 30

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

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

这是我的一个TYPO3项目示例，我需要图像的真实属性以正确的关系进行缩放。

Answer 31

我从不同的正确答案中收集信息。

假设，我们想要获取<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.naturalWidth和el.naturalHeight将为我们提供natural dimensions，即图像文件的尺寸。

布局尺寸

el.offsetWidth和el.offsetHeight将为我们提供在文档上呈现元素的尺寸。

Answer 32

尝试

function sizes() {
  console.log(`width: ${pic.width}, height:${pic.height}`);
}

<img id="pic" src="https://picsum.photos/300/150">
<button onclick="sizes()">show size</button>

如何使用JavaScript获取图像大小（高度和宽度）？

32 个答案:

示例代码 -

我在 jquery 中的两分钱