JavaScript gets the original size of the image, taking width as an example_javascript tips

If you want to get the original size of the img element in the page, taking the width as an example, the first thing you may think of is width, as follows

Copy code The code is as follows:

🎜><script> <BR>var img = document.getElementsByTagName('img')[0] <BR>var width = getWH(img, 'width') // 690 <BR></script>

The getWH method used here is mentioned in the previous article. The width obtained at this time is the same as the original size of the image.

If you add the width attribute to img, this method will not work. For example, the actual width of the image is 690, and the width is set to 400. If you obtain it according to the above method, 400 will be returned

Copy code The code is as follows:

& lt; script & gt;
var IMG = documenn T.GetelementsBytagname ('IMG') [0]
var width = getWH(img, 'width') // 400

Obviously, 400 is not the original width of the image.

There is a way to get it, directly create a new img object, and then assign the src of the old img to the new one. At this time, you can get the width of the new img

Copy code The code is as follows:

<script> <BR>function getNaturalWidth(img) { <BR>var image = new Image() <BR>image.src = img. src <BR>var naturalWidth = image.width <BR>return naturalWidth <BR>} <BR>var img = document.getElementsByTagName('img')[0] <BR>getNaturalWidth(img) // 690 <BR>&lt ;/script> <BR><BR> </script>

It should be noted that the newly created image here does not need to be added to the DOM document.

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. Modify the method of obtaining image size.

Copy code The code is as follows:

function getImgNaturalDimensions(img, callback) {
var nWidth, nHeight
if (img.naturalWidth) { // Modern browsers
nWidth = img.naturalWidth
nHeight = img.naturalHeight
} else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}

Pay attention to the processing of IE6/7/8, create a new img, and only set its src. At this time, the image needs to be fully loaded. Only then can you get its width and height. So this is asynchronous, you can pass a callback, and the original width and height are passed in as parameters in the callback.