Detailed explanation of how to obtain the original width and height of an image using Javascript

Preface

There are many methods on the Internet about using Javascript to obtain the original width and height of images. This article will talk about this issue again, which may be helpful to some people.

Detailed explanation of the method

If you want to get the original size of the img element in the page, taking the width as an example, the first thing that may come to mind is the innerWidth attribute of the element, or width() in jQuery method.

is as follows:

<img  id="img" src="1.jpg" alt="Detailed explanation of how to obtain the original width and height of an image using Javascript" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 600
</script>

It seems that you can get the size of the picture.

But if you add the width attribute to the img element, for example, the actual width of the image is 600, and the width is set to 400. At this time innerWidth is 400, not 600. Obviously, it is unreliable to use innerWidth to obtain the original size of the image.

This is because the innerWidth property obtains the actual rendered width of the element box model, not the original width of the image.

<img  id="img" src="1.jpg"    style="max-width:90%" alt="Detailed explanation of how to obtain the original width and height of an image using Javascript" >
 
<script type="text/javascript">
 var img = document.getElementById("img");
 console.log(img.innerWidth); // 400
</script>

jQuery’s width() method calls the innerWidth property at the bottom level, so the width obtained by the width() method is not the original width of the image.

So how to get the original width of the img element?

naturalWidth / naturalHeight

HTML5 provides a new attribute naturalWidth/naturalHeight that can directly obtain the original width and height of the image. These two properties have been implemented in Firefox/Chrome/Safari/Opera and IE9.

is as follows:

var naturalWidth = document.getElementById('img').naturalWidth,
 naturalHeight = document.getElementById('img').naturalHeight;

The compatibility of naturalWidth / naturalHeight in major browsers is as follows:

Therefore, if you do not consider compatibility with IE8, you can safely use the naturalWidth / naturalHeight attributes.

Compatibility implementation in IE7/8:

Browsers of IE8 and earlier versions do not support the naturalWidth and naturalHeight attributes.

In IE7/8, we can use new Image() to get the original size of the image, as follows:

function getNaturalSize (Domlement) {
 var img = new Image();
 img.src = DomElement.src;
 return {
  width: img.width,
  height: img.height
 };
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

IE7+ browsers are all compatible Function encapsulation:

function getNaturalSize (Domlement) {
 var natureSize = {};
 if(window.naturalWidth && window.naturalHeight) {
  natureSize.width = Domlement.naturalWidth;
  natureSizeheight = Domlement.naturalHeight;
 } else {
  var img = new Image();
  img.src = DomElement.src;
  natureSize.width = img.width;
  natureSizeheight = img.height;
 }
 return natureSize;
}
 
// 使用
var natural = getNaturalSize (document.getElementById('img')),
 natureWidth = natural.width,
 natureHeight = natural.height;

Summary

The above is the entire content of this article. I hope it can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.

For more detailed explanations of Javascript methods to obtain the original width and height of images, please pay attention to the PHP Chinese website for related articles!