这是我的方法:

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.

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

你还可以使用:

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

让我们将在这里学到的所有内容组合成一个简单的函数(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 a successful loading 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>

要得到自然的高度和宽度:

.naturalHeight document.querySelector (img); .naturalWidth document.querySelector (img); < img src = " img.png " >

如果你想获取样式的高度和宽度:

document.querySelector（“img”）.offsetHeight; document.querySelector（“img”）.offsetWidth;

使用jQuery，你可以这样做:

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