只需传递input元素获得的“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;
}

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

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

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

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

这是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"
}

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

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

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

你还可以使用:

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