LesPaulMedlem sedan apr. 200449 inlägg 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>
yohpopsMedlem sedan feb. 20011 198 inlägg Du kan använda onload på IMG-taggen.
onload="getImgSize(this.src)"
LesPaulMedlem sedan apr. 200449 inlägg Jag kanske uttryckte mig otydligt. Det jag vill är att kunna skriva ut värdet direkt på sidan inte i en alertbox.
SPiNMedlem sedan mars 20007 896 inlägg <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>
LesPaulMedlem sedan apr. 200449 inlägg 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?
zcorpanMedlem sedan dec. 20042 245 inlägg 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.
LesPaulMedlem sedan apr. 200449 inlägg Ok. Kan du hjälpa mig och leda mig på rätt väg för att lösa detta?
SPiNMedlem sedan mars 20007 896 inlägg 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.
LesPaulMedlem sedan apr. 200449 inlägg 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?
zcorpanMedlem sedan dec. 20042 245 inlägg <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 ...
LesPaulMedlem sedan apr. 200449 inlägg 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?
zcorpanMedlem sedan dec. 20042 245 inlägg 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?
LesPaulMedlem sedan apr. 200449 inlägg 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>
zcorpanMedlem sedan dec. 20042 245 inlägg <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>
