JavaScript gets the original size of the picture

Source: Internet
Author: User
Tags return

Page of the IMG element, want to get its original size, take the width as an example may be the first thought is width, as follows


<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 you get is the same as the original size of the picture.



If the IMG plus the width attribute, this way is not, for example, the actual width of the picture is 690, set a width of 400, then the way to get the above return 400


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

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



There is a way to get, directly create a new IMG object, and then the old img to the SRC assignment to the new, this time to get the new img width can be



<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 should be noted that the new image created here is not required to be added to the DOM document.



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


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 processing of IE6/7/8, created a new IMG, only set its SRC, you need to have the picture fully loaded before you can get its width and height. So here is the asynchronous, can pass a callback, the callback to the original height as a parameter passed in.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.