Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Getting width and height from a picture file

Reply
Thread Tools

Getting width and height from a picture file

 
 
Joaquim Amado Lopes
Guest
Posts: n/a
 
      02-06-2008
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

 
Reply With Quote
 
 
 
 
Evertjan.
Guest
Posts: n/a
 
      02-06-2008
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.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
 
 
 
Joaquim Amado Lopes
Guest
Posts: n/a
 
      02-06-2008
Greetings.

On 06 Feb 2008 23:06:41 GMT, "Evertjan."
<(E-Mail Removed)> wrote:
>> 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.
>

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

 
Reply With Quote
 
Joost Diepenmaat
Guest
Posts: n/a
 
      02-06-2008
Joaquim Amado Lopes <(E-Mail Removed).> writes:

> Greetings.
>
> On 06 Feb 2008 23:06:41 GMT, "Evertjan."
> <(E-Mail Removed)> wrote:
>>> 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.
>>

> 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.
 
Reply With Quote
 
Joaquim Amado Lopes
Guest
Posts: n/a
 
      02-07-2008
Greetings.

On Thu, 07 Feb 2008 00:42:31 +0100, Joost Diepenmaat <(E-Mail Removed)>
wrote:
[snip]
>> 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.
>

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

Cheers,
Joaquim Amado Lopes

 
Reply With Quote
 
Joost Diepenmaat
Guest
Posts: n/a
 
      02-07-2008
Joaquim Amado Lopes <(E-Mail Removed).> writes:

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

> 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...etting_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.
 
Reply With Quote
 
Joaquim Amado Lopes
Guest
Posts: n/a
 
      02-07-2008
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

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      02-07-2008
Joaquim Amado Lopes wrote on 07 feb 2008 in comp.lang.javascript:

> Greetings.
>
> On 06 Feb 2008 23:06:41 GMT, "Evertjan."
> <(E-Mail Removed)> wrote:
>>> 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.
>>

> 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_aspjpe...OriginalHeight
http://www.aspjpeg.com/object_aspjpe...#OriginalWidth


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      02-10-2008
Joaquim Amado Lopes wrote:
> 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
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Why can't I change height with <col width="50" height="100">? Bernd Meier HTML 6 01-14-2008 07:25 AM
picture width decides table column width David Basford HTML 3 09-30-2007 10:49 PM
CSS question: Using height/width at 100% with fixed-width borders/margin/padding cera HTML 1 08-18-2007 02:59 AM
Textbox width scaling to width of data not width of page? AndrewF ASP .Net 1 10-10-2005 04:38 PM
CSS min-width, max-width, and min-height with display:inline Lois HTML 1 12-27-2004 03:03 AM



Advertisments