Problem z pobraniem wymiarów obrazu w JavaScript

pytanie zadane 11 kwietnia 2019 w JavaScript przez MrFraxis Początkujący (390 p.)

Witam

Jak w temacie, mam problem z pobraniem wysokości i szerokości zdjęcia z obrazu, który znajduje się na dysku.

Ogólnie mówiąc, mam projekt strony i na jednej z podstron będą ładowały się zdjęcia do galerii. Chcę, żeby po kliknięciu w wybrane zdjęcie wyświetliło się nowe okno przeglądarki ( to działa ), które będzie miało wymiary takie jak zdjęcie ale nie chcę dla każdego zdjęcia osobno na sztywno wpisywać ich rozmiarów. Przeszukałem już chyba połowę internetu i jakoś żadne rozwiązanie do tej pory nie pomogło :/

Kod, który teoretycznie działa:

Wyświetlenie obrazu:

<a href="img/peugeot.jpg" onclick="imgSize(); return popUp(this.href, 'Test')" id="test" class="test"><img src="img/peugeot.jpg" class="zdjecia" alt="Tekst alternatywny"></a>

Otwarcie nowego okna:

function popUp(url, title, width, height){
   if(!url)return;
   var w;
   if(w=window.open('','popup','width='+(width)+', height='+(height))){
      w.document.write('<html><head><title>'+(title||'')+'</title></head><body style="margin: 0; padding: 0"><a href="javascript:window.close();" title="Zamknij okienko"><img src="'+url+'" onload="window.resizeTo(this.width, this.height)" alt=""></a></body></html>');
   }
   return!w;
}

I nieszczęsne pobieranie rozmiarów

function imgSize(){
            var myImg = document.querySelector(".test");
            var realWidth = myImg.naturalWidth;
            var realHeight = myImg.naturalHeight;
            var konw = parseInt(realWidth, 10);
            console.log(realWidth, realHeight, konw);
            alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
          }

Niestety ten ostatni kod zwraca jedynie "undefined", którego nie da się przekonwertować na string, int, double...

Dodam jeszcze, że dopiero zaczynam swoją przygodę z JS więc być może jest gdzieś jakiś błąd, którego nie widzę?

Z góry dziękuję za pomoc :)

1 odpowiedź

odpowiedź 12 kwietnia 2019 przez pablop76 VIP (123,180 p.)
wybrane 14 kwietnia 2019 przez MrFraxis

Najlepsza

var myImg = document.querySelector(".test");

powinien pobierać obrazek a nie odnośnik. Czyli ustaw klasę dla img i pobierz rozmiary img. Jeżeli to ma być popup to dlaczego otwierasz obrazki w nowym oknie zamiast po prostu w specjalnym pojemniku z pozycją fixed?