---
title: "Visa bildens storlek?"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/167225-visa-bildens-storlek"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "LesPaul"
published: "2007-12-13T10:11:57.000Z"
updated: "2007-12-16T19:49:40.000Z"
replies: 13
views: 1206
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/167225-visa-bildens-storlek"
---

# Visa bildens storlek?

## #1 — LesPaul, 2007-12-13T10:11Z

Hej på er,
jag undrar om man kan modifiera scriptet nedan för att skriva ut bildens storlek direkt utan att behöva trycka på en knapp för att visa resultatet? Eller om det finns någon annan javascriptlösning för detta?

```
<script language='JavaScript'>  
function getImgSize(imgSrc)
   {
   var newImg = new Image();
   newImg.src = imgSrc;
   var height = newImg.height;
   var width = newImg.width;
   alert ('The image size is '+width+'*'+height);
   }
</script>

function getImgSize2(id){ 
var pic = document.getElementById(id); 
var h = pic.offsetHeight; 
var w = pic.offsetWidth; 
alert ('The image size is '+w+'*'+h); 
} 

<IMG id='demoImg' src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg">
<BUTTON onclick="getImgSize(document.getElementById('demoImg').src);">Get Image Size</BUTTON>
```

Permalänk: https://www.webforum.nu/p/167225

## #2 — yohpops, 2007-12-13T12:06Z

Du kan använda onload på IMG-taggen.

```
onload="getImgSize(this.src)"
```

Permalänk: https://www.webforum.nu/p/2060846

## #3 — LesPaul, 2007-12-13T12:22Z

Jag kanske uttryckte mig otydligt. Det jag vill är att kunna skriva ut värdet direkt på sidan inte i en alertbox.

Permalänk: https://www.webforum.nu/p/2060849

## #4 — SPiN, 2007-12-13T12:26Z

```
<IMG id='demoImg' src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg">
<script type="text/javascript">
var myImg = new Image();
myImg.src='http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg';
document.writeln("The image size is " + myImg.width + "*" + myImg.height);
</script>
```

Permalänk: https://www.webforum.nu/p/2060851

## #5 — LesPaul, 2007-12-13T12:58Z

Tack, det fungerade nästan! När jag går in på sidan visas endast 0\*0, gör jag en refresh dyker korrekt siffror upp. Varför tro?

Permalänk: https://www.webforum.nu/p/2060860

## #6 — zcorpan, 2007-12-13T19:52Z

För att innan bilden har laddats kan webbläsaren inte veta bildens dimensioner, och skriptet körs innan bilden har laddats. När du laddar om sidan ligger bilden i cache.

Du får vänta tills bilden laddats och sen skriva ut det. Men då kan du inte använda document.write() utan du får jobba med innerHTML eller DOM-metoder.

Permalänk: https://www.webforum.nu/p/2060960

## #7 — LesPaul, 2007-12-14T10:08Z

Ok. Kan du hjälpa mig och leda mig på rätt väg för att lösa detta?

Permalänk: https://www.webforum.nu/p/2061045

## #8 — SPiN, 2007-12-14T10:30Z

I din head-tagg:

```
<script type="text/javascript">
function ShowImageSize() {
     var myImg = new Image();
     myImg.src='http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg';
     document.getElementById('ImageSizeElement').innerHTML='The image size is ' + myImg.width + '*' + myImg.height;
}
</script>
```

Ändra din body-tagg:

```
<body onload="javascript: ShowImageSize();">
```

Där bilden är:

```
<IMG id='demoImg' src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg">
[b]<span id="ImageSizeElement"></span>[/b]
```

Borde kanske lösa biffen.

Permalänk: https://www.webforum.nu/p/2061052

## #9 — LesPaul, 2007-12-14T10:36Z

Ja det kanske fungerar men om man har flera bilder i ex en lista som man vill skriva ut måtten på fungerar väl inte det här va?

Permalänk: https://www.webforum.nu/p/2061057

## #10 — zcorpan, 2007-12-14T11:05Z

```
<head>
<script type="text/javascript">
function writeDimentions(img) {
  var text = document.createTextNode("The image size is " + img.width + "*" + img.height);
  img.parentNode.insertBefore(text, img.nextSibling);
}
</script>
</head>
...
<IMG id='demoImg' onload='writeDimentions(this)' src="http://www.goldenstudy.com/bbs/uploadimg//20060228144500426.jpg">
<IMG ...
```

Permalänk: https://www.webforum.nu/p/2061061

## #11 — LesPaul, 2007-12-14T13:49Z

Tack, det fungerar fint. Nu har jag bara en fråga kvar. Kan man separera bilden och utskriften, dvs man kanske har en lista där man skriver endast filnamnet samt i en annan cell vill printa ut storleken på bilden fast man vill inte visa bilden? Måste de hänga ihop om du förstår vad jag menar?

Permalänk: https://www.webforum.nu/p/2061082

## #12 — zcorpan, 2007-12-15T13:26Z

Nej, de behöver inte hänga ihop.

Menar du en tabell? En lista har väl inte celler? :)

Kan du visa lite kod för hur du vill att det ska bli?

Permalänk: https://www.webforum.nu/p/2061301

## #13 — LesPaul, 2007-12-16T18:37Z

Nä, ok du har rätt :) Jag menar typ så här:

\<table border="1" cellpadding="0" cellspacing="0" width="72%"\>
  \<tr\>
    \<td width="13%" rowspan="2"\>
    \<p align="center"\>BILD\</td\>
    \<td width="22%"\>\<b\>Artist\</b\>\</td\>
    \<td width="21%"\>\<b\>Filnamn\</b\>\</td\>
    \<td width="20%"\>\<b\>Storlek\</b\>\</td\>
    \<td width="49%"\>\<b\>Filstorlek\</b\>\</td\>
  \</tr\>
  \<tr\>
    \<td width="22%"\>John Lennon\</td\>
    \<td width="21%"\>john_300dpi.jpg\</td\>
    \<td width="20%"\>3024x1024 pix\</td\>
    \<td width="49%"\>1.2 MB\</td\>
  \</tr\>
\</table\>

Permalänk: https://www.webforum.nu/p/2061511

## #14 — zcorpan, 2007-12-16T19:49Z

```
<script>
 function writeDimentions(img) {
   var text = document.createTextNode(img.width + "x" + img.height + " pix");
   img.parentNode.parentNode.nextSibling.getElementsByTagName("td")[2].appendChild(text);
 }
</script>
<table>
 <tr>
  <td rowspan="2"><img onload="writeDimentions(this)" src="..."></td>
  <th>Artist</th>
  <th>Filnamn</th>
  <th>Storlek</th>
  <th>Filstorlek</th>
 </tr>
 <tr>
  <td>John Lennon</td>
  <td>john_300dpi.jpg</td>
  <td></td>
  <td>1.2 MB</td>
 </tr>
</table>
```

Permalänk: https://www.webforum.nu/p/2061529

---

Tråden på webben: https://www.webforum.nu/amne/javascript/167225-visa-bildens-storlek
