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

jQuery的答案:

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

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

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

在我的例子中，我有一个File类型(保证是一个图像)，我想要图像的尺寸，而不是将其加载到DOM上。

一般策略:将文件转换为ArrayBuffer→将ArrayBuffer转换为base64字符串→使用此作为image类的图像源→使用naturalHeight和naturalWidth来获取维度。

const fr = new FileReader();
fr.readAsArrayBuffer(image); // Image the 'File' object
fr.onload = () => {
  const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;

  // Convert to base64. String.fromCharCode can hit a stack overflow error if you pass
  // the entire arrayBuffer in, and iteration gets around this
  let binary = '';
  const bytes = new Uint8Array(arrayBuffer);
  bytes.forEach(b => binary += String.fromCharCode(b));
  const base64Data = window.btoa(binary);

  // Create an image object. Note, a default width/height MUST be given to the constructor (per
  // the documentation) 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);
  }
}

这允许您从文件中获得图像尺寸和纵横比，而无需渲染它。它可以使用fromEvent轻松地将onload函数转换为RxJS Observables，以获得更好的异步体验:

// fr is the file reader, and this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')

我想我改进了源代码，以便能够在尝试找出其属性之前让图像加载。否则，它将显示'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']);
}

假设，我们想要得到<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
  });
})

自然维度

埃尔。naturalWidth和el。naturalHeight会得到图像文件的自然尺寸。

布局尺寸

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