How to get Natural image width and height?

Ben

Hi at all

I am looking for the natural size of an image

I found this function :

while ((imgHeight = image.getHeight(this)) == -1 ) {

// loop until image loaded

}

while ((imgWidth = image.getWidth(this)) == -1 ) {

// loop until image loaded

}

But firefox errors console write that getWidth is not a valid function

Pleae can you tell me if there is a wrong into my code or how can I get the
width and height of an images with others methods?

Thenk you very much

Jun 27 '08 #1

Subscribe Post Reply

8024

dino

"Ben" <be*@nospam.itwrote in message
news:Tz********************@twister2.libero.it...

Hi at all

I am looking for the natural size of an image

did you try to append some onload handler to the image?

let's say variable image stores reference to your dom image node. try this:

image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...
cheers

Jun 27 '08 #2

SAM

Ben a écrit :

>
But firefox errors console write that getWidth is not a valid function

did you code it ?
or do you use prototype's library ?
<html>
<style type="text/css">
img { width: 100px; }
</style>
<script type="text/javascript">
function getSize(imgId) {
var i = document.getElementById(imgId);
var siz = function(what) {
what.widss = what.naturalWidth? what.naturalWidth : what.width;
what.heigt = what.naturalHeight? what.naturalHeight : what.height;
return what;
}
i = siz(i);
if(!i.widss) setTimeout(function(){getSize(imgId)},200);
else
return [i.widss, i.heigt];
}
window.onload = function() {
alert(getSize('V_2').join(' '));
}
</script>
All images displayed in 100px width :
<img src="http://i11.ebayimg.com/01/i/000/ed/13/575b_1.JPG" alt="" id="V_1"
onload="alert(this.width+' '+this.height);">
<img src="http://i16.ebayimg.com/01/i/000/ed/13/562b_1.JPG" alt="" id="V_2">
<img src="http://i3.ebayimg.com/03/i/000/e2/fe/aa08_1.JPG" alt="" id="V_3">
size of image #:
<select
onclick="alert(getSize('V_'+(+this.selectedIndex+1 )).join(' '))">
<option>1
<option>2
<option>3
</select>
</html>

--
sm

Jun 27 '08 #3

SAM

dino @ wrk a écrit :

>
let's say variable image stores reference to your dom image node. try this:

image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...

if image was sized by CSS you'll get the CSS's size

prefer to try : naturalWidth naturalHeight
(after testing this attributes are known)

--
sm

Jun 27 '08 #4

Ugo

>let's say variable image stores reference to your dom image node. try this:

>>
image.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
}
just writing from head now, but something like this should work...

if image was sized by CSS you'll get the CSS's size

is not true!

prefer to try : naturalWidth naturalHeight

not standard

(after testing this attributes are known)

if YOU prefer to try naturalWidth..., it is more elegant using the OR
operator, so:
what.widss = what.naturalWidth || what.width;
instead of:
what.widss = what.naturalWidth? what.naturalWidth : what.width;

Jun 27 '08 #5

Ugo

>if image was sized by CSS you'll get the CSS's size

is not true!

sorry, that's true

Jun 27 '08 #6

Ugo

[cut]

how can I get the
width and height of an images with others methods?

I propose this way:

/* your function that manages the dimensione passed by param*/
function useDim( w, h )
{
alert( w );
alert( h );
}
/* "my" function that gets the dimensions and launches the function passed
by param (if defined)*/
function getSize( imgPath, fun )
{
var img = new Image( );

img.onload = function( )
{
if( fun = fun || null )
fun( this.width, this.height );
}

img.src = imgPath;
}

you can use this function into onload of the page or anyway in your code,
so:

getSize( 'images/img.gif', useDim );

Jun 27 '08 #7

SAM

Ugo a écrit :

>>if image was sized by CSS you'll get the CSS's size
is not true!

sorry, that's true

Me too I thought it wasn't :-)

It's only true if you set css's sizes via JS

<img style="width:100px" ...

where I expect we get :
- image.width (natural width)
- image.style.width (apparent width)
(height is proportionnal)

--
sm

Jun 27 '08 #8

SAM

Ugo a écrit :

[cut]
>how can I get the
width and height of an images with others methods?

I propose this way:

Unfortunately it seems that doesn't work with my Safari
(I think that it doesn't like 'onload' with new image !?)

/* "my" function that gets the dimensions and launches the function passed
by param (if defined)*/
function getSize( imgPath, fun )
{
var img = new Image( );

img.onload = function( )
{
if( fun = fun || null )
fun( this.width, this.height );
}

img.src = imgPath;
}

--
sm

Jun 27 '08 #9

jdalton

Here is a cross browser example implementation of Hedger Wang
technique.
http://pastie.caboo.se/190528

Jun 27 '08 #10

Ugo

Unfortunately it seems that doesn't work with my Safari

I knew about some problems with Safari and own managment of onload image,
but I thought new versions had solved this bug
.... now I just tried with my Safari (win version) and works well, boh...

(I think that it doesn't like 'onload' with new image !?)

yes, the problem was that...

Jun 27 '08 #11

by: ok | last post by:

Hello, Q: How do I get image width and height before uploading an image? This because, I want to restrict people uploading huge files. Thanks in advance

PHP

Image width, height.

by: Premshree Pillai | last post by:

Hello, Is there a Py module available using which I can find the width and height of any image format? -Premshree ===== -Premshree http://www.qiksearch.com/]

Python

<Img> tag, width, height

by: homecurr | last post by:

I am writing a tool to generate html and have a problem with the <img> tag. The tool generates something like "<img src="...">". At the time the html is generated, the tool does not know the actual...

HTML / CSS

pure asp way to get image width and height

by: Nancy Drew | last post by:

does anybody know of a way to get an image width and height without using a custom dll? we have aspJPEG on the server, and there are methods to fetch image width and height with that, but it only...

ASP / Active Server Pages

<img> width height

by: News | last post by:

I am trying to be able to manipulate the width and height of an <img> but do not seem to be able. "Yes", I know the JavaScript will "not" manip anything, which is ok. I simply do not know how to...

Javascript

Getting Image Width/Height

by: emilmgeorge | last post by:

Pls somebody give me the code for getting the height and width of a image in pixels in javascript or asp. Thanks - Emil

Javascript

find image width and height

by: Atul | last post by:

I am unable to find image height and width in mozilla firefox. My code is working in IE but not in Mozilla. How can i find image width and height in mozilla? function check(sel) { if(sel != "")...

Javascript

getting hidden image width/height in IE

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=""...

Javascript

how to get swf/image width/height with javascript

by: Mike Kypriotis | last post by:

in php with getimagesize() for both img and swf worked well,in javascript? PS I do not want to first load it and then use its id as a reference object, I want to know because I need to know in...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

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,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

How to get Natural image width and height?

Similar topics