Solved

How do i get the image dimension from the image URL? -

Posted on 2007-11-21
1
711 Views
Last Modified: 2013-12-25
Hi There,
Any one here know how to get the image width and height from the URL. That is i need the image width and height when it loading in the browser. So i can adjust the image size with respect to the  original dimension when it display on the browser . any help would be greatly apppriciated
0
Comment
Question by:palanee83
1 Comment
 
LVL 18

Accepted Solution

by:
Morcalavin earned 20 total points
ID: 20328650
You can't get the width and height of the image just from the url(without some type of server side scripting).  The image would have to be loaded somewhere before you can tell how big it is.

However, you can load it in an absolute, hidden div and use offsetWidth/height to get the size of it.  This  is a quick example of how to get the image size, without actually showing the image.  You can add javascript to resize the image later or whatever.(tonberry.gif is a file of mine that is 339x300)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
 
</script>
<style type="text/css">
	#imageloader
	{
		visibility: hidden;
		position:absolute;
	}
</style>
<title>Untitled Document</title>
</head>
 
<body>
<div><input type="button" value="Get Image Size" onclick="alert(document.getElementById('image').offsetWidth + 'x' + document.getElementById('image').offsetHeight) " /></div>
<div id="imageloader"><img id="image" src="tonberry.gif"></div>
</body>
</html>

Open in new window

0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime is disastrous for companies and can lead to major hits on a brand, reputation, an…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question