[JS]Image.width & image.height probleem

[Freemann]

ok heb nu al verschillende script geprobeerd maar kom er niet uit.
Wat ik wil is voordat ik een image upload met behulp van een asp functie dat ik met JS de resolutie valideer.
Op dit moment heb ik het volgende zeer simpele script dat een alert weergeeft met daarin de waardes van de image. Maar laten nu al deze waardes "undefined" zijn........
Ik krijg dit dus bijna bij elk script.
Bij 1 script kreeg ik waardes te zien maar deze sloegen werkelijk nergens op. Van een afbeelding van 200x200 kreeg ik een breedte van 252xxx en een hoogte van 0.

Wie kan mij met behulp van onderstaand script iets opweg helpen?

JavaScript:

var theImage = "http://localhost/pagina_1/images/icon1.gif";
function showImageSize(theImage) {   
alert('height=' + theImage.height+      '; width=' + theImage.width +      '; hspace=' + theImage.hspace +      '; vspace=' + theImage.vspace)
}
showImageSize(theImage)

een twee stuk zeer experimentele code heb ik ook nog(wat overigens ook 0,0 aan h*b weergeeft)

JavaScript:

function checkFileSize() {
  var totalSize = 0;
  var htmlSize;
  var hoogte = 0000;
  var breedte = 0000;
  var overLimit = false;
  for (j = 1; j <= nfiles; j++) {
    var himg = document.getElementById('himg'+j);
    var size = document.getElementById('size'+j);
    var fileSize = himg.fileSize;
    
    
    fileSize = parseInt(fileSize);

    if (fileSize < 0) {
      size.innerHTML = '-';
    } else {
      htmlSize = formatSize(fileSize);
      if ( fileSize>maxFileSize ) {
        htmlSize += ' (over limit, ' + formatSize(maxFileSize) + ' max) ';
        size.style.color = 'red';
        overLimit = true;
      } else {
        size.style.color = '';
      }
      if (hoogte >= "100"){ 
        tegrootw = true;
        tegroot = '1';
      }else{
        tegrootw = false;
        tegroot = '2';
      }
      if (breedte >= "200"){ 
            tegrooth = true;
            tegroot = '3';
      }else{
            tegrooth = false;
            tegroot = '4';
      }
      size.innerHTML = htmlSize;
    hoogte.innterHTML = document.getElementById('Image '+j).height;
    breedte.innterHTML = document.getElementById('Image '+j).width;
     
      totalSize += fileSize;
    };//if (fileSize < 0) {
  };//for (j = 1; j <= nfiles; j++)

[ Voor 52% gewijzigd door Freemann op 19-07-2005 00:10 ]

[r0bert]

Het gaat erom dat je eerst de image laat renderen en dan die waardes opvraagt.

Dus pseudo:

code:

new Image();
img.src = 'adres.ext';

bla = element.appendChild(img);
bla.(style.)height/width uitlezen

element.removeChild(bla);

//edit: \/ Wou er nog bij commenten of ik dat laatste niet zeker wist, maar ging er al vanuit dat er wel iemand ging reageren die dat wel wist

[ Voor 26% gewijzigd door r0bert op 19-07-2005 02:57 ]

[crisp]

nee, aan het document toevoegen is niet nodig. Wel moet je wachten tot je image geladen is:

JavaScript:

var theImage = new Image();
theImage.onerror = imgError;
theImage.onload = imgLoad;
theImage.src = 'http://localhost/pagina_1/images/icon1.gif';

function imgError()
{
    alert('the image could not be loaded';
}

function imgLoad()
{
    alert('width: ' + this.width + ', height: ' + this.height);
}

fileSize is overigens IE-only...

[ Voor 5% gewijzigd door crisp op 19-07-2005 00:42 ]

[Vinzzz243]

en stel dat theimage nu in een functie staat. Hoe wacht je dan netjes in die functie totdat die image geladen is, zodat je evt de afmetingen mee kan posten?

[Freemann]

hmmm ok ziet er opzich goed uit. Maar hoe pas ik het nu toe

Even zitten stoeien maar krijg zo ie zo al geen Alert op me scherm....

Wat de fileSize betreft, dat is idd zo maar geen probleem omdat het in een IE georienteerde omgeving gebruikt gaat worden.

[André]

Vinzzz schreef op dinsdag 19 juli 2005 @ 07:46:
en stel dat theimage nu in een functie staat. Hoe wacht je dan netjes in die functie totdat die image geladen is, zodat je evt de afmetingen mee kan posten?

Je kunt niet wachten in een functie Je kunt net als in het voorbeeld hierboven gewoon een functie aan de onload hangen die getriggerg wordt zodra het plaatje geladen is.

[Freemann]

ok ondertussen heb ik hem aan de gang!
IE gaf geen foutmelding maar Firefox wel. Het zat hem erin dat de eerste alert niet goed was afgesloten met een ")". MAAR nu zit ik nog met een probleem:
Hij wil ze niet laden vanaf een lokale omgeving. Dit is juist wat ik wil omdat ik de afbeeldingen wil valideren voordat ze worden geupload. Dit bezoeker dient met een <input type="file"> de afbeelding selecteerd in zijn lokale omgeving. Na deze selectie wil ik met een "onchange" de waardes weergeven achter de input. Zo kan de gebruiker duidelijk zien wat hij heeft staan(size,height,width).

Iemand nog een suggestie hoe ik nu dus de lokale image kan valideren en hoe ik deze gegevens op het scherm kan tonen.