473,698 Members | 2,243 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Extract Width and Height of image

SM
Hello,
I've created a Unordered list with images using the Javascript DOM,
and i want to set up the width and height attributes of the image...
The problem is that most images vary in size.
Here's my question:
Knowing the filepath of the image, is it possible to extract the width
and height? If yes, how...

Thanks
Marco

....
var ul = document.create Element('ul');

for(var i=0; i<lstThumbnail. length; i++)
{
var path = lstThumbnail[i].path;

var li = document.create Element('li');
var a = document.create Element('a');

//assign 'href' attribute to element a
a.setAttribute( 'href', '#');

//create img element, assign the attributes: src, alt, width,
height
var img = document.create Element('img');
img.setAttribut e('src', path);
img.setAttribut e('alt', noimageTxt);

img.setAttribut e('width', ???); <--- EXTRACT WIDTH AUTOMATIC
img.setAttribut e('height', ???); <--- EXTRACT HEIGHT AUTOMATIC

//add <imgto <a>
a.appendChild(i mg);

//add <a<li>
li.appendChild( a);

//add <lito <ul>
ul.appendChild( li);
}
....

Apr 30 '07 #1
4 4052
SM wrote:
Hello,
I've created a Unordered list with images using the Javascript DOM,
and i want to set up the width and height attributes of the image...
The problem is that most images vary in size.
Here's my question:
Knowing the filepath of the image, is it possible to extract the width
and height? If yes, how...
No.

<snip>

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 1 '07 #2
On May 1, 1:12 am, -Lost <maventheextraw o...@techie.com wrote:
Knowing the filepath of the image, is it possible to extract the width
and height? If yes, how...

No.
var img=new Image();
img.src="filepa th of image"
img.onload=func tion(){ alert('Width: '+img.width+', Height:
'+img.height) }

May 1 '07 #3
scripts.contact wrote:
On May 1, 1:12 am, -Lost <maventheextraw o...@techie.com wrote:
>>Knowing the filepath of the image, is it possible to extract the width
and height? If yes, how...
No.

var img=new Image();
img.src="filepa th of image"
img.onload=func tion(){ alert('Width: '+img.width+', Height:
'+img.height) }
Oops! :\

I have no clue what I was thinking.

Hrmm... maybe I was thinking of reading document.images[0].width or
..height before the image loaded?

No, I am just inebriated.

--
-Lost
Remove the extra words to reply by e-mail. Don't e-mail me. I am
kidding. No I am not.
May 1 '07 #4
SM
On May 1, 3:24 am, "scripts.contac t" <scripts.cont.. .@gmail.com>
wrote:
On May 1, 1:12 am, -Lost <maventheextraw o...@techie.com wrote:
Knowing the filepath of the image, is it possible to extract the width
and height? If yes, how...
No.

var img=new Image();
img.src="filepa th of image"
img.onload=func tion(){ alert('Width: '+img.width+', Height:
'+img.height) }
So it is posible, cool !
I will try it!
I was also looking for a preload function and i believe your answer
does both... preload and size retrieval

Thanks
Marco

May 2 '07 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
3175
by: Alex Shi | last post by:
In php, is there a way obtain the width of a charactor of a certain font? Alex -- ================================================== Cell Phone Batteries at 30-50%+ off retail prices! http://www.pocellular.com ==================================================
0
2228
by: SteveJ | last post by:
All, Can someone help me solve the next step. First of all let me say I'm new to php. I pieced the following code together from samples I found on the net and a book I bought called PHP Cookbook. So please forgive me if this isn't the best approach - I'm open to suggestions I finally got my code to work that logs into another site and pulls the orderstatus page to my server.
2
7746
by: Stephen Weatherly | last post by:
Could anyone please help me with a problem I am having with my table widths??? If I have 2 images within a td tag, but using CSS relative positioning I position one over the top of the second (I am placing a transparent gif over the top of a normal gif) then the width of my table is large enough to accommodate both images side by side My browsers (both IE ad Firefox) do not appear take into account the relative positioning of my...
11
3573
by: Norman L. DeForest | last post by:
Am I misunderstanding the CSS specifications or is Firefox (version 1.0.6) (and Opera) doing the wrong thing? It appears that Firefox 1.0.6 includes the border in width calculations for tables but not in height calculations. Oh, and Opera version 8.02 does the same thing. |<-->| |<-->| <------ border |<------------>| <------ table contents
2
6762
by: Robson Carvalho Machado | last post by:
Dear friends, I'm dynamically creating a Hyperlink with spacer.gif as ImageURL that is an 1px transparent image only to determine link position, but as I create this link dynamically I could not set image width. This problem makes my link clickable only on its borders. When viewing HTML source I could see that spacer.gif has no width and height, so HTML shows only 1px x 1 px image.
7
7933
by: Neo Geshel | last post by:
Greetings. I have managed to stitch together an awesome method of posting text along with an image to a database, in a way that allows an unlimited number of previews to ensure that text and image are perfect before submission. This involves converting any uploaded image to a Base64 String and holding that in a hidden form field until either the post gets submitted to the database or the image gets replaced with another one. I...
1
3888
by: comp.lang.php | last post by:
Sorry folks, I'm on a roll!!! I need to calculate the height or width of an image if you change either the width or height and don't change BOTH of them at the same time, this is to "vector" the image. Here is the class method, it obviously doesn't work: /**
8
2437
by: Kentor | last post by:
Hello, I have users that submit images to my website. By default I choose to make the width bigger than the height because usually pictures are taken horizontally... But in some cases people take pictures vertically so what I'm getting at is... can I know whether an image was taken horizontally or vertically so I can make the proper width/ height lengths so that it looks nice and not kinda weird... because if you make the width bigger...
1
4194
epots9
by: epots9 | last post by:
I have a image inside of a div <div id="image"> <div id="loader"> <img id="loaderImage" src="assets/loader.gif" alt="loading..." /> </div> <div id="loaded"> <img id="picture" src="" alt="" /><!--image in question--> <div id="closeAll" onclick="closeAll();">X</div> </div>
0
8675
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9160
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
8862
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7729
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5860
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4370
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4619
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3050
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2002
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.