Getting width and height from a picture file

[Joaquim Amado Lopes]

Greetings.

Is there any way, in Javascript, to put in 2 variables the width and
height of a picture, given the filename and without the picture being
displayed in the webpage?

Thank you,
Joaquim Amado Lopes

 

[Evertjan.]

Joaquim Amado Lopes wrote on 07 feb 2008 in comp.lang.javascript:

Is there any way, in Javascript, to put in 2 variables the width and
height of a picture, given the filename and without the picture being
displayed in the webpage?

Just put the img outside the viewable window

style='position:absolute;left:-1000px;'

and then measure it.

I think.

 

[Joaquim Amado Lopes]

Greetings.

Just put the img outside the viewable window

style='position:absolute;left:-1000px;'

and then measure it.

I think.

It's not practical for what I need.

I have a form to publish articles, in which the user chooses the
picture to display with the article.
The list of pictures is collected from a folder and presented in a
SELECT form field. As the user chooses one of the items on the list
(onChange), that picture is previewed.

As some of the pictures may be quite large and must be previewed with
reduced dimensions, I need to know the dimensions of each picture
before displaying it, to determine the width and height of the preview
and maintain the proportions.

Cheers,
Joaquim Amado Lopes

 

[Joost Diepenmaat]

Greetings.


It's not practical for what I need.

I have a form to publish articles, in which the user chooses the
picture to display with the article.
The list of pictures is collected from a folder and presented in a
SELECT form field. As the user chooses one of the items on the list
(onChange), that picture is previewed.

As some of the pictures may be quite large and must be previewed with
reduced dimensions, I need to know the dimensions of each picture
before displaying it, to determine the width and height of the preview
and maintain the proportions.

Then you may be out of luck: to determine the dimensions you *will* have
to examine the content of the image stream. How much of the content
you'll need is dependent on the type of image. You may need most or all
of it.

You could possibly be able to hack something together for the major file
types using Ajax, but I would suggest you move all of that to the
server, where there are plenty of libraries and resources that will
handle this much better.

Joost.

 

[Joaquim Amado Lopes]

Greetings.

[snip]

Then you may be out of luck: to determine the dimensions you *will* have
to examine the content of the image stream. How much of the content
you'll need is dependent on the type of image. You may need most or all
of it.

You could possibly be able to hack something together for the major file
types using Ajax, but I would suggest you move all of that to the
server, where there are plenty of libraries and resources that will
handle this much better.

I wasn't clear in my previous post. The images are on the server.
The upload part is already working.

Cheers,
Joaquim Amado Lopes

 

[Joost Diepenmaat]

I wasn't clear in my previous post. The images are on the server.
The upload part is already working.

Well, if you know the dimensions on the server, just use an Ajax to
fetch them:

http://developer.mozilla.org/en/docs/AJAX:Getting_Started

Note that that text uses XML in the response. It's usually easier and
faster to use a javascript response and eval() it to parse the data.
See also http://www.json.org/

Joost.

 

[Joaquim Amado Lopes]

Gretings.

Thank you, Evertjan and Joost, for your help.

Ajax seems interesting but is too complex for what I need.

I ended up following Evertjan's suggestion and included all images in
the page, way out of the window...

<img src="image_1.gif"
style="position:absolute;left:-10000px;top:-10000px">
....
<img src="image_n.gif"
style="position:absolute;left:-10000px;top:-10000px">

.... so they are loaded before they are required, and used...

document.hiddenimage.src = "image_x.gif";
imagewidth = document.hiddenimage.width;
imageheight = document.hiddenimage.height;

.... and then processed "imagewidth" and "imageheight".

Just need to check if it is cross-browser.

Thank you again and take care,
Joaquim Amado Lopes

 

[Evertjan.]

Joaquim Amado Lopes wrote on 07 feb 2008 in comp.lang.javascript:

Greetings.


It's not practical for what I need.

I have a form to publish articles, in which the user chooses the
picture to display with the article.
The list of pictures is collected from a folder and presented in a
SELECT form field. As the user chooses one of the items on the list
(onChange), that picture is previewed.

As some of the pictures may be quite large and must be previewed with
reduced dimensions, I need to know the dimensions of each picture
before displaying it, to determine the width and height of the preview
and maintain the proportions.

Doing this clientside without downloading seems impossible.

I suppose you better use a serverside javascript solution, like:

http://www.aspjpeg.com/object_aspjpeg.html#OriginalHeight
http://www.aspjpeg.com/object_aspjpeg.html#OriginalWidth

 

[Thomas 'PointedEars' Lahn]

Is there any way, in Javascript, to put in 2 variables the width and
height of a picture, given the filename and without the picture being
displayed in the webpage?

Besides using DOM mutator methods and script properties to add a hidden
element to the DOM tree (which requires NN4 DOM or CSS support), you may
try this proprietary approach:

var width, height;

var img = new Image();

img.onload = function()
{
width = this.width;
height = this.height;
};

img.src = "http://foo.example/bar.jpg";

It should be supported where the script engine is compatible to JavaScript
1.3 (NN 4) or later, but there is no guarantee as Image essentially is a
feature provided by the host environment (which was NN 3 or later then).

In any case, it strikes me as being much less of a dirty hack than what you
have chosen to do.

Be sure that you do feature tests at runtime no matter the approach you
are using.


PointedEars