Javium
01-17-2004, 03:15 PM
How can I get the size of an image in Javascript? (width and heigth)
Thanks,
Javium
Thanks,
Javium
Click to See Complete Forum and Search --> : Get Size of an Image
Khalid Ali
01-17-2004, 03:30 PM
var img = new Image();
img.src = "images/someImage.gif";
alert("Width = "+img.width+"\nHeight = "+img.height)
pretty straight forward..;)
img.src = "images/someImage.gif";
alert("Width = "+img.width+"\nHeight = "+img.height)
pretty straight forward..;)
Javium
01-17-2004, 03:55 PM
Thank you for your answer, Ali !
Can you please help me with the script below? When I use your answer, the width and height are 28 and 30, but my image im[i] is 800x600... a little strange.
Is there an error in my script?
function getImageWidth(myimage)
{
var img = new Image();
img.src = myimage;
var imwidth = img.width;
return imwidth;
}
function getImageHeight(myimage)
{
var img = new Image();
img.src = myimage;
var imheight = img.height;
return imheight;
}
<script language="JavaScript">
for (var i = 1; i <= maxim; i++)
var imwidth = 0;
var imheight = 0;
{
document.write('<img src="'+im[i]+'" vspace="5" hspace="5" width="'+getImageWidth(im[i])+'" height="'+getImageHeight(im[i])+'" border="1" alt="" >');
}
</script>
Can you please help me with the script below? When I use your answer, the width and height are 28 and 30, but my image im[i] is 800x600... a little strange.
Is there an error in my script?
function getImageWidth(myimage)
{
var img = new Image();
img.src = myimage;
var imwidth = img.width;
return imwidth;
}
function getImageHeight(myimage)
{
var img = new Image();
img.src = myimage;
var imheight = img.height;
return imheight;
}
<script language="JavaScript">
for (var i = 1; i <= maxim; i++)
var imwidth = 0;
var imheight = 0;
{
document.write('<img src="'+im[i]+'" vspace="5" hspace="5" width="'+getImageWidth(im[i])+'" height="'+getImageHeight(im[i])+'" border="1" alt="" >');
}
</script>
gil davis
01-17-2004, 04:06 PM
You have to wait for the image to load before you can access it's width and height. Images have an "onload" function that you can use to tell you when it is ok to get the parameters. The only problem is working out the sequence of events.
<script>
var img = new Image();
img.onload = showme(); // I don't remember if the () are necessary or not
img.src = "some.jpg";
function showme() {
alert(img.width + ", " + img.height);
}
</script>
<script>
var img = new Image();
img.onload = showme(); // I don't remember if the () are necessary or not
img.src = "some.jpg";
function showme() {
alert(img.width + ", " + img.height);
}
</script>
fredmv
01-17-2004, 07:38 PM
Originally posted by gil davis
I don't remember if the () are necessary or notNot only unnesessary, but incorrect to add in this kind of context. When you add them, you are assigning the return value of the function to that event handler, which is now setting the event handler to nothing more than undefined and not really executing the function when the event fires. As you have to code now, it will alert "0, 0" because the image hasn't even really loaded. By omitting the parenthesis, you are basically making a reference to the function as opposed to executing it. You could also use an annoymous function (i.e., a function with no name) as well:foo.onload = function() { alert(foo.width + ',' + foo.height); }
I don't remember if the () are necessary or notNot only unnesessary, but incorrect to add in this kind of context. When you add them, you are assigning the return value of the function to that event handler, which is now setting the event handler to nothing more than undefined and not really executing the function when the event fires. As you have to code now, it will alert "0, 0" because the image hasn't even really loaded. By omitting the parenthesis, you are basically making a reference to the function as opposed to executing it. You could also use an annoymous function (i.e., a function with no name) as well:foo.onload = function() { alert(foo.width + ',' + foo.height); }
Khalid Ali
01-17-2004, 07:45 PM
make sure that you use global variables in anonymouse functions,because of their limited scope.
Javium
01-17-2004, 07:57 PM
I thank you for the replies, and could solve my problem for getting the size of the image with below code.
But now, I have another problem!
The for-loop shows only the last image from the variable maxim (which is 24), the images 1 to 23 are not showed! Why?
function getImageWidth(n)
{
var img = new Image();
img.src = n;
var imwidth = img.width;
return imwidth;
}
function getImageHeight(n)
{
var img = new Image();
img.src = n;
var imheight = img.height;
return imheight;
}
</script>
<script language="JavaScript">
{
for (var i = 1; i <= maxim; i++)
var b = im[i];
var wd = parseInt(getImageWidth(b))/6.4;
var hg = parseInt(getImageHeight(b))/6.4;
document.write('<img src="'+b+'" vspace="5" hspace="5" width="'+wd+'" height="'+hg+'" border="1" alt="" >');
}
</script>
But now, I have another problem!
The for-loop shows only the last image from the variable maxim (which is 24), the images 1 to 23 are not showed! Why?
function getImageWidth(n)
{
var img = new Image();
img.src = n;
var imwidth = img.width;
return imwidth;
}
function getImageHeight(n)
{
var img = new Image();
img.src = n;
var imheight = img.height;
return imheight;
}
</script>
<script language="JavaScript">
{
for (var i = 1; i <= maxim; i++)
var b = im[i];
var wd = parseInt(getImageWidth(b))/6.4;
var hg = parseInt(getImageHeight(b))/6.4;
document.write('<img src="'+b+'" vspace="5" hspace="5" width="'+wd+'" height="'+hg+'" border="1" alt="" >');
}
</script>
Khalid Ali
01-17-2004, 08:40 PM
I always try to avoid using document.write,unless I am not left with any other options.
In todays time when we have pretty good tool known as DOM,I'd prefer using some other DOM method instead of document.write
In todays time when we have pretty good tool known as DOM,I'd prefer using some other DOM method instead of document.write
Javium
01-18-2004, 05:49 AM
I never heard about the DOM Utilities. What are these, and where can I find them? (on the Internet, of course :p )
Javium
Javium
fredmv
01-18-2004, 05:59 AM
Originally posted by Javium
I never heard about the DOMThe DOM — the Document Object Model — is a tree structure in which is basically all of the nodes that make up the document. Through JavaScript — and other scripting lanugages — you can traverse the DOM (e.g., appending or removing nodes). For example, if you wanted to create a new image and then add it into the document using pure DOM, you would do this:<script type="text/javascript">
//<![CDATA[
onload = function()
{
var img = document.createElement('img'); // create the node
img.setAttribute('src', 'foo.png'); // set the 'src' attribute to 'foo.png'
img.setAttribute('alt', ''); // set the 'alt' attribute to nothing
document.body.appendChild(img); // append the child node to the <body>
}
//]]>
</script>Check these tutorials for a good introduction to the DOM: http://www.sitepoint.com/article/872/1 http://www.scottandrew.com/weblog/articles/dom_1 http://www.brainjar.com/dhtml/intro/
I never heard about the DOMThe DOM — the Document Object Model — is a tree structure in which is basically all of the nodes that make up the document. Through JavaScript — and other scripting lanugages — you can traverse the DOM (e.g., appending or removing nodes). For example, if you wanted to create a new image and then add it into the document using pure DOM, you would do this:<script type="text/javascript">
//<![CDATA[
onload = function()
{
var img = document.createElement('img'); // create the node
img.setAttribute('src', 'foo.png'); // set the 'src' attribute to 'foo.png'
img.setAttribute('alt', ''); // set the 'alt' attribute to nothing
document.body.appendChild(img); // append the child node to the <body>
}
//]]>
</script>Check these tutorials for a good introduction to the DOM: http://www.sitepoint.com/article/872/1 http://www.scottandrew.com/weblog/articles/dom_1 http://www.brainjar.com/dhtml/intro/
Pittimann
01-18-2004, 07:03 AM
Hi!
Apart from not knowing, where you define maxim, im etc., I cannot figure out, why you actually need the size of your images. If you leave out the width and height attributes in your img tags, each image will be displayed with the height and width it actually has.
Cheers - Pit
Apart from not knowing, where you define maxim, im etc., I cannot figure out, why you actually need the size of your images. If you leave out the width and height attributes in your img tags, each image will be displayed with the height and width it actually has.
Cheers - Pit
Javium
01-18-2004, 10:30 AM
Hi Pit! -- and all Javascript friends,
I need to know the size of the images in order to display the images correctly in thumbnail format.
You can take a look at my website http://www.charvi.com and you'll see how the thumbnails are displayed.
But I have a big problem displaying the thumbnails, some are not displayed, it occurs randomly and I don't know why, although I made a preload....
Please look at the source code of http://www.charvi.com/011/thumbs.htm
and please advise me which corrections should be done.
Thank you in advance!
Javium
I need to know the size of the images in order to display the images correctly in thumbnail format.
You can take a look at my website http://www.charvi.com and you'll see how the thumbnails are displayed.
But I have a big problem displaying the thumbnails, some are not displayed, it occurs randomly and I don't know why, although I made a preload....
Please look at the source code of http://www.charvi.com/011/thumbs.htm
and please advise me which corrections should be done.
Thank you in advance!
Javium
Pittimann
01-18-2004, 10:50 AM
Hi!
Well - I have a DSL connection - that's not too slow for me usually even though much faster connections exist.
Your page loaded and loaded and...
Finally I had a page with your bg image and a button for the slideshow. I patiently waited until the page had loaded (nothing new appeared, no thumbnails etc.). Then I clicked the button and this Duesseldorf tram image was displayed. It has 480812 bytes! Probably all your other images are of a similar size - I could have downloaded a movie in that time.
I do not at all want to offend you, but unless you use this site for yourself only (and either using it offline, everything on your harddisk or having a connection which has not yet been invented) you should not do that.
Your images' sizes have to be reduced (bytes - not pixels).
Needing the size for thumbnails - ok - I theoretically understand that, but a thumbnail image should not only be smaller in terms of pixels, but also in terms of the file size. Thus - that would make sense to me - you would need two images for each photo:
A thumbnail (small in pixels and bytes) and the big one (big in pixels and smaller in bytes that you have it). If you act like that, you will NOT need the images' pixel sizes for your thumbnails, because your thumbnails would have their own sizes.
If you need further assistance, just post again...
Cheers - Pit
Edit: what I feared is correct - I just had a look at the following 2 photos (btw - I have been in these places many times :)) - both are of approximately the same size like the 011-02.jpg.
You were talking about 24 images - that makes around 10 megs to load...
--------------------------
Second edit: a nightmare came true: I refreshed your page (it is still loading) and the first thumbnails showed up.
Each of them around 400 k - toooo much...
Well - I have a DSL connection - that's not too slow for me usually even though much faster connections exist.
Your page loaded and loaded and...
Finally I had a page with your bg image and a button for the slideshow. I patiently waited until the page had loaded (nothing new appeared, no thumbnails etc.). Then I clicked the button and this Duesseldorf tram image was displayed. It has 480812 bytes! Probably all your other images are of a similar size - I could have downloaded a movie in that time.
I do not at all want to offend you, but unless you use this site for yourself only (and either using it offline, everything on your harddisk or having a connection which has not yet been invented) you should not do that.
Your images' sizes have to be reduced (bytes - not pixels).
Needing the size for thumbnails - ok - I theoretically understand that, but a thumbnail image should not only be smaller in terms of pixels, but also in terms of the file size. Thus - that would make sense to me - you would need two images for each photo:
A thumbnail (small in pixels and bytes) and the big one (big in pixels and smaller in bytes that you have it). If you act like that, you will NOT need the images' pixel sizes for your thumbnails, because your thumbnails would have their own sizes.
If you need further assistance, just post again...
Cheers - Pit
Edit: what I feared is correct - I just had a look at the following 2 photos (btw - I have been in these places many times :)) - both are of approximately the same size like the 011-02.jpg.
You were talking about 24 images - that makes around 10 megs to load...
--------------------------
Second edit: a nightmare came true: I refreshed your page (it is still loading) and the first thumbnails showed up.
Each of them around 400 k - toooo much...
Javium
01-18-2004, 12:53 PM
Hi Pit,
I agree that it's too much, it's good to hear the effect on someone else's computer. I also have an ADSL connection so I don't realize it immediately.
Okay, I will create separate thumbnails in small size, that's much easier and much faster. Created thumbnails are around 13Kb, what will be very fast to download even on slow connections.
For the big images, they have indeed an average of 450,000 bytes... That's because I want to offer high quality JPG images. Okay, I'm going to save my images with 20% loss, which won't change too much their quality, but reduce the size from 480K to 130K, which is indeed an important difference.
I have a program that can create thumbnails automatically, but I don't have a program that will resize a series of selected images automatically. Do you know a good software that does the job?
Thank you, Danke schön.
Grüsse aus Belgien,
Javium
I agree that it's too much, it's good to hear the effect on someone else's computer. I also have an ADSL connection so I don't realize it immediately.
Okay, I will create separate thumbnails in small size, that's much easier and much faster. Created thumbnails are around 13Kb, what will be very fast to download even on slow connections.
For the big images, they have indeed an average of 450,000 bytes... That's because I want to offer high quality JPG images. Okay, I'm going to save my images with 20% loss, which won't change too much their quality, but reduce the size from 480K to 130K, which is indeed an important difference.
I have a program that can create thumbnails automatically, but I don't have a program that will resize a series of selected images automatically. Do you know a good software that does the job?
Thank you, Danke schön.
Grüsse aus Belgien,
Javium
Pittimann
01-18-2004, 01:44 PM
Hi!
Sorry - I had written a long reply, did some stuff in between and my machine decided to die. I had written that I have guests etc - and I don't want to repeat all that.
The image in the attachment (line 704 in Duesseldorf) has 47.5 k. Don't you think, the quality is good enough for your site (you could offer to make the full 400 kb available for people who need the full quality)?
If you like, I can give you a hand to adjust things. I don't have any sophisticated software for playing with graphics (that's why the attached image could be much better without being bigger in bytes), but maybe I can help you with some code.
In the post which was lost, I also had a link, to show you, how small thumbnails and good photos can be. Here it is:
http://www.ska-pics.de/gallery/albup17 (no trains, just my favourite band)
Cheers - Pit
Sorry - I had written a long reply, did some stuff in between and my machine decided to die. I had written that I have guests etc - and I don't want to repeat all that.
The image in the attachment (line 704 in Duesseldorf) has 47.5 k. Don't you think, the quality is good enough for your site (you could offer to make the full 400 kb available for people who need the full quality)?
If you like, I can give you a hand to adjust things. I don't have any sophisticated software for playing with graphics (that's why the attached image could be much better without being bigger in bytes), but maybe I can help you with some code.
In the post which was lost, I also had a link, to show you, how small thumbnails and good photos can be. Here it is:
http://www.ska-pics.de/gallery/albup17 (no trains, just my favourite band)
Cheers - Pit
ray326
01-18-2004, 02:50 PM
Oh my, it just never loads. And I'm on a 3Mb connection.
Images should never be resized by the browser. The width and height attributes should always match the physical pixel dimensions of the image. Because HTML books are so pitiful they never explain correctly that the purpose of those attributes is to allow the browser to allocate screen space for the image and continue rendering the page before loading the image.
I'm afraid there is a common name for doing thumbnails like that, it's called dumbnailing.
I'm familiar with two commercial Windows apps, ThumbsPlus and CompuPic, that will batch process images like that. An excellent free program that will do batch processing is IrfanView. You can download it from downloads.com.
Images should never be resized by the browser. The width and height attributes should always match the physical pixel dimensions of the image. Because HTML books are so pitiful they never explain correctly that the purpose of those attributes is to allow the browser to allocate screen space for the image and continue rendering the page before loading the image.
I'm afraid there is a common name for doing thumbnails like that, it's called dumbnailing.
I'm familiar with two commercial Windows apps, ThumbsPlus and CompuPic, that will batch process images like that. An excellent free program that will do batch processing is IrfanView. You can download it from downloads.com.
Javium
01-19-2004, 02:11 PM
Hi Pit !
Amen... Er... no no, I see your computer is still alive! :D
Indeed, your favourite band's website has excellent thumbnails and images. For thumbnails I agree that it's necessary as 'ray326' also explained (thanks Ray), so I'm going to create thumbnails tonight on my website.
For the large images, your example of the Düsseldorfer tram with only 47.5K is a very impressive file size for a 800x600 image. But the quality is already a bit too low, for people's pics it's no problem but for a tramway or any high-tech material, higher quality is preferable, so for example, tram fans like to know which fleet number the tram has.... in your reduced image, it's hard to read it's tram #3048 on line 704... So I prefer to reduce the quality for maximum 20%, which gives a file size of 130K, which is already smaller than 480K. I appreciate your idea of giving the opportunity to see the high quality image to whoever is asking for it.
Anyway, I'm interested in your technique for reformatting the image, I trust you can select the compression rate?
Javium
Amen... Er... no no, I see your computer is still alive! :D
Indeed, your favourite band's website has excellent thumbnails and images. For thumbnails I agree that it's necessary as 'ray326' also explained (thanks Ray), so I'm going to create thumbnails tonight on my website.
For the large images, your example of the Düsseldorfer tram with only 47.5K is a very impressive file size for a 800x600 image. But the quality is already a bit too low, for people's pics it's no problem but for a tramway or any high-tech material, higher quality is preferable, so for example, tram fans like to know which fleet number the tram has.... in your reduced image, it's hard to read it's tram #3048 on line 704... So I prefer to reduce the quality for maximum 20%, which gives a file size of 130K, which is already smaller than 480K. I appreciate your idea of giving the opportunity to see the high quality image to whoever is asking for it.
Anyway, I'm interested in your technique for reformatting the image, I trust you can select the compression rate?
Javium
Pittimann
01-19-2004, 02:32 PM
Hi!Amen... Er... no no, I see your computer is still alive!Yeah it is - even though I often mistreat it.
I agree with you concerning the quality of the photos! If the tram #3048 (and other things on this or another images) has to be legible, you'll need to reduce the compression rate (which I do use btw).
Years ago, I used to use Corel (in this case: Photopaint) for purposes like that, but my licence is with Corel 4.0 - too much of a dinosaur. At present I am using free programs like IrfanView, which ray326 also recommended for batch processing. I have to admit, that I never used this feature because I do batch business with a self made - hard to believe - MS-Office macro. I did my first programming steps in an early Word for DOS version in 1990 (or so). I advanced a bit and I am satisfied with that.
Cheers - Pit
Gruesse aus ******! :)
I agree with you concerning the quality of the photos! If the tram #3048 (and other things on this or another images) has to be legible, you'll need to reduce the compression rate (which I do use btw).
Years ago, I used to use Corel (in this case: Photopaint) for purposes like that, but my licence is with Corel 4.0 - too much of a dinosaur. At present I am using free programs like IrfanView, which ray326 also recommended for batch processing. I have to admit, that I never used this feature because I do batch business with a self made - hard to believe - MS-Office macro. I did my first programming steps in an early Word for DOS version in 1990 (or so). I advanced a bit and I am satisfied with that.
Cheers - Pit
Gruesse aus ******! :)
Javium
01-19-2004, 03:14 PM
Hi!
I updated my website, now displaying real thumbnails (size 5K instead of 15K as told before!)
Maybe they are now so small that they are displaying too fast, resulting to some not displayed thumbnails (small frames with a "x"). How can I force the display? I think it's something with onload, but I don't know how exactly...
The big images are now in an average size of 150K.
What do you think of my website now? (only the series 11 has been changed for now).
Nochmals meine Danke für Ihr Hilfe! Entschuldigen Sie mir, aber mein Deutsch is gar nicht so gut! :rolleyes:
Und bitte, Ihr Computer is als eine shöne Mädchen, es hat viel Sanftheit nötig!! ;)
I updated my website, now displaying real thumbnails (size 5K instead of 15K as told before!)
Maybe they are now so small that they are displaying too fast, resulting to some not displayed thumbnails (small frames with a "x"). How can I force the display? I think it's something with onload, but I don't know how exactly...
The big images are now in an average size of 150K.
What do you think of my website now? (only the series 11 has been changed for now).
Nochmals meine Danke für Ihr Hilfe! Entschuldigen Sie mir, aber mein Deutsch is gar nicht so gut! :rolleyes:
Und bitte, Ihr Computer is als eine shöne Mädchen, es hat viel Sanftheit nötig!! ;)
ray326
01-19-2004, 05:17 PM
That's lightyears better! You need to allow resizing and scrolling, though. The slideshow button was off the bottom of my page and parts of the images are off the page in the full image screens.
Javium
01-19-2004, 05:39 PM
I'm glad you like my efforts for reaching the perfection! :D
Thank you for reporting the scrolling problem ray326. I'm using a TFT screen with a resolution of 1280x1024 so it looks perfect to me. :cool:
I will correct this tomorrow as it's already past midnight here.
Javium
Thank you for reporting the scrolling problem ray326. I'm using a TFT screen with a resolution of 1280x1024 so it looks perfect to me. :cool:
I will correct this tomorrow as it's already past midnight here.
Javium
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.