Problem with the image dimensions.

[venu madhav]

Hi All,
In my application, I have an option where user can upload any
image and it would be displayed on top of a particular table. I've set
the width to be displayed as some width = 50px and height = 35px. If
the user uploads a file whose dimensions are more than that, then it
is shrinking the image size which is acceptable. But if the size of
the image is less than those dimensions then it is trying to enlarge
it which is looking pretty odd. Can some one let me know how can I
avoid this.
I tried calculating the size of the image before displaying.
But the problem is, since the image has to come from the server, it is
taking time to calculate its dimensions and in the meanwhile the next
steps are getting executed taking both the dimensions as zero. If I
put an alert in between, then am getting the dimensions correctly. Is
there any way to obtain the correct values without that alert message?

Please let me know if you need any further info,

Thank you,
Venu

 

[SAM]

Le 7/8/10 6:49 AM, venu madhav a écrit :

Hi All,
In my application, I have an option where user can upload any
image and it would be displayed on top of a particular table. I've set
the width to be displayed as some width = 50px and height = 35px. If

set the dimensions in JS

the user uploads a file whose dimensions are more than that, then it
is shrinking the image size which is acceptable. But if the size of
the image is less than those dimensions then it is trying to enlarge
it which is looking pretty odd. Can some one let me know how can I
avoid this.

<img
onload="var w = this.width;
this.style.width = (w && w.replace('px','')<50)?
w + 'px' :
'50px';"
src="test.jpg"
id="viewer";
alt="to view";
title="screen to display your uploaded picture">


document.getElementById('viewer').src = myUpLoadedFile;


Possible that do not work with all browers.
(img width / img initialWidth)

 

[Evertjan.]

SAM wrote on 08 jul 2010 in comp.lang.javascript:

onload="var w = this.width;
this.style.width = (w && w.replace('px','')<50)?
w + 'px' :
'50px';"

No need for a local variable.
this.width returns a number [IE8 & Chrome tested].
Why setting the width to it's original value?


<img
onload = "if (this.width>50) this.style.width = '50px';"
src='the1.jpg'>

what about:

<img
style='max-width:50px;'
onload = "if (this.width>50)alert('IE, shame on you!');"
src='the1.jpg'>

 

[SAM]

Le 7/8/10 2:01 PM, Evertjan. a écrit :

SAM wrote on 08 jul 2010 in comp.lang.javascript:

onload="var w = this.width;
this.style.width = (w && w.replace('px','')<50)?
w + 'px' :
'50px';"

No need for a local variable.
this.width returns a number [IE8 & Chrome tested].

In doubt, a little replace causes no trouble

Why setting the width to it's original value?

where original value ?
that was no more set in this example,
img with no attribute width, nor style

<img
onload = "if (this.width>50) this.style.width = '50px';"
src='the1.jpg'>

And what appends then when I'll replace the image with one 40px width ?
hop! still in 50px ... no ?

what about:

<img
style='max-width:50px;'
onload = "if (this.width>50)alert('IE, shame on you!');"
src='the1.jpg'>

very good ! ;-)


<img src="1.jpg" alt="" style="max-width:50px;_width=50">

(no, no ! no typo! IE's slang)

 

[Evertjan.]

SAM wrote on 08 jul 2010 in comp.lang.javascript:

Le 7/8/10 2:01 PM, Evertjan. a écrit :

SAM wrote on 08 jul 2010 in comp.lang.javascript:

onload="var w = this.width;
this.style.width = (w && w.replace('px','')<50)?
w + 'px' :
'50px';"

No need for a local variable.
this.width returns a number [IE8 & Chrome tested].

In doubt, a little replace causes no trouble

Why setting the width to it's original value?

where original value ?

The bit width value of the image.

that was no more set in this example,

Every image has such

img with no attribute width, nor style
Why?


And what appends then when I'll replace the image with one 40px width ?
hop! still in 50px ... no ?

The above takes any jpg.

very good ! ;-)


<img src="1.jpg" alt=""

style="max-width:50px;_width=50">

That will not work, try:

style='max-width:50px;_width:50'