Solved

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

Posted on 2007-11-21
1
682 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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

In a previous article here at Experts Exchange (http://www.experts-exchange.com/articles/18414/Create-a-PDF-file-with-Contact-Sheets-montage-of-thumbnails-for-all-JPG-files-in-a-folder-and-each-of-its-subfolders-using-an-automated-batch-method.html)…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
The goal of the tutorial is to teach the user how to use the cropping tool and to straighten there photos so it does not look tilted. You will choose which photo you want to edit, crop it to you liking and make it straight.
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now