JavaScript gets the original size of the picture

The IMG element in the page, want to get its original size, with the width as an example the first thing you might think of is width, as follows

1 2 3) 4 5

<script> var img = document.getelementsbytagname (' img ') [0] var width = Getwh (img, ' width ')//690 </ Script>

The Getwh method used here is mentioned in the previous article. The width obtained is the same as the original size of the picture.

If you add the Width property to the IMG, this is not the case, the actual width of the slice is 690, the width is set to 400, then the above method returns 400

1 2 3) 4 5

<script> var img = document.getelementsbytagname (' img ') [0] var width = Getwh (img, ' width ')//</script>

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

There is a way to get to, create a new IMG object directly, and then assign the old img src to the new, this time to get the width of the new img

1 2 3 4 5 6 7 8 9

<script> function getnaturalwidth (img) {     var image = new image ()     image.src = Img.src      var naturalwidth = Image.width     return naturalwidth} var img = document.getElementsByTagName (' img ') [0] Getnaturalwidth (IMG)  //690 </script>

It is important to note that the newly created image here is not required to be added in the DOM document.

HTML5 provides a new property naturalwidth/naturalheight can directly get the original width height of the picture. These two properties have been implemented in Firefox/chrome/safari/opera and IE9. The method of obtaining the image size under the Reformation.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function Getimgnaturaldimensions (IMG, callback) {    var nwidth, nheight      if  (img.naturalwidth) { //modern browser         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]}

Note that the IE6/7/8 processing, created a new IMG, only set its SRC, it is necessary to let the picture fully loaded before you can get its width height. So here is the asynchronous, can pass a callback, the callback in the original width and height as a parameter passed in.

Related:

Http://www.cnblogs.com/snandy/p/3704938.html

http://www.sitepoint.com/html5-responsive-design-image-dimensions/

Http://www.w3.org/TR/2011/WD-html5-author-20110705/the-img-element.html#the-img-element

JavaScript gets the original size of the picture