当页面在JavaScript或jQuery中加载时，你可以像这样应用onload处理程序属性:

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

此外(除了Rex和Ian的回答)还有:

imageElement.naturalHeight

and

imageElement.naturalWidth

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

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

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

这个答案正是我所寻找的(在jQuery):

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

其他所有人都忘记了的事情是，你不能在加载前检查图像大小。当作者检查所有发布的方法时，它可能只在本地主机上工作。

由于这里可以使用jQuery，请记住'ready'事件是在图像加载之前触发的。$('#xxx').width()和.height()应该在onload事件或以后触发。

这是Node.js的替代答案。这可能不是OP的意思，但它可能会派上用场，似乎在问题的范围内。

这是一个使用Node.js的解决方案，该示例使用Next.js框架，但它可以与任何Node.js框架一起工作。它使用探针图像大小的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"
}