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

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

jQuery的答案:

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

Use

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 resolution image. Your image width=" + this.width + ", height=" + 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]);
}

这适用于多个图像预览和上传。如果你必须为每个图像逐一选择，然后复制粘贴到所有预览图像功能和验证!!

我认为，使用clientWidth和clientHeight已经过时了。

我用HTML5做了一些实验，看看哪些值实际上会被返回。

首先，我使用了一个名为Dash的程序来获得图像API的概述。

它声明了高度和宽度是图像的渲染高度/宽度，而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

Try

函数大小(){ console.log(“宽度:${照片。宽度},高度:$ {pic.height}’); ｝ <img id="pic" src="https://picsum.photos/300/150"> <按钮onclick = "尺寸()“>显示> < /按钮大小

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