如何使用 JavaScript 获取图片大小（宽度和高度）-之路教程

naturalWidth 和 naturalHeight 属性

naturalWidth 和 naturalHeight 是只读属性，分别返回图像的原始宽度和高度。
由于网页上显示的图像的宽度和高度可以使用 <img> 标签的 'width' 和 'height' 属性进行更改，因此 naturalWidth 和 naturalHeight 属性用于图像的原始宽度或者高度必需的。

如何使用 JavaScript 获取图片大小（宽度和高度）

我们可以使用 HTML5 图像 naturalWidth 和 naturalHeight 属性获取图像的原始宽度和高度，几乎所有主要浏览器都支持这些属性。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <div>Click on img to see the result</div>
    <script>
      let img = document.createElement('img');
      img.id = 'imgId';
      img.src = '/bg.png';
      document.body.appendChild(img);
      img.addEventListener("click", imgSize);
      function imgSize() {
        let myImg = document.querySelector("#imgId");
        let realWidth = myImg.naturalWidth;
        let realHeight = myImg.naturalHeight;
        alert("Oroirnal width=" + realWidth + ", " + "Oroirnal height=" + realHeight);
      }
    </script>
  </body>
</html>

要获取当前的宽度和高度，我们可以使用 JavaScript clientWidth 和 clientHeight 属性。

这些 DOM 属性显示 DOM 元素内部尺寸的当前浏览器内尺寸，不包括边距和边框。

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      img {
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div>点击图片查看宽度和高度</div>
    <script>
      let img = document.createElement('img');
      img.id = 'imgId';
      img.src = 'https://onitroad.com/bg.png';
      document.body.appendChild(img);
      img.addEventListener("click", imgSize);
      function imgSize() {
        let img = document.getElementById('imgId');
        //or however you get a handle to the IMG
        let width = img.clientWidth;
        let height = img.clientHeight;
        alert("Oroirnal width=" + width + ", " + "Oroirnal height=" + height);
      }
    </script>
  </body>
</html>

日期：2020-06-02 22:16:19 来源：oir作者：oir

←如何使用 JavaScript 获取文件扩展名

JavaScript抛出异常时如何获取堆栈跟踪→

naturalWidth 和 naturalHeight 属性

目录