webForumDet fria alternativet

Visa bildens storlek?

JavaScript

13 svar · 1 202 visningar · startad av LesPaul

Medlem sedan apr. 200449 inlägg
Frågan#1

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>
Medlem sedan feb. 20011 198 inlägg
#2

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

onload="getImgSize(this.src)"
Medlem sedan apr. 200449 inlägg
#3

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

Medlem sedan mars 20007 896 inlägg
#4
<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>
Medlem sedan apr. 200449 inlägg
#5

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?

Medlem sedan dec. 20042 245 inlägg
#6

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.

Medlem sedan apr. 200449 inlägg
#7

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

Medlem sedan mars 20007 896 inlägg
#8

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.

Medlem sedan apr. 200449 inlägg
#9

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?

Medlem sedan dec. 20042 245 inlägg
#10
<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 ...
Medlem sedan apr. 200449 inlägg
#11

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?

Medlem sedan dec. 20042 245 inlägg
#12

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?

Medlem sedan apr. 200449 inlägg
#13

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>

Medlem sedan dec. 20042 245 inlägg
#14
<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>
325 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
177 ms — deklarationer (db)
0 ms — hämta statistik (cache)
132 ms — hämta tråd, inlägg och bilagor (db)
161 ms — ändringar (db)