首页 > 建站教程 > JS、jQ、TS >  js naturalWidth与naturalHeight获取图片原始大小正文

js naturalWidth与naturalHeight获取图片原始大小

js naturalWidth与naturalHeight属性是获得图片原始的尺寸,不会因外部width和height属性设置的改变而改变。


示例如下:

<!DOCTYPE html>
<html>
   <head>
   <meta charset="UTF-8">
   <title></title>
   </head>
   <body>
   <img id="image" src="2.png" style="display:block;" width="100" height="100" />
   <script>
   window.onload = function(){
   var image = document.getElementById("image");
   console.log("原始宽度:"+image.naturalWidth);
   console.log("原始高度:"+image.naturalHeight);
   console.log("宽:"+image.width);
   console.log("高:"+image.height);
   }
   </script>
   </body>
</html>


运行结果:

naturalWidth与naturalHeight


我们可以看到,这个原始宽高,不受设置的影响。


需要注意的是:

图片必须提前加载,否则,图片原始宽高均为0,如下图:

naturalWidth与naturalHeight