• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z pobraniem wymiarów obrazu w JavaScript

0 głosów
402 wizyt
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ź

0 głosów
odpowiedź 12 kwietnia 2019 przez pablop76 VIP (123,640 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?

komentarz 14 kwietnia 2019 przez MrFraxis Początkujący (390 p.)
Sorki za zwłokę :)

Pomogło chociaż nie jestem pewny czy w 100% dobrze Ciebie zrozumiałem

Podobne pytania

0 głosów
1 odpowiedź 204 wizyt
+1 głos
0 odpowiedzi 195 wizyt
pytanie zadane 2 lutego 2018 w JavaScript przez R[a]=d(ek); Mądrala (6,370 p.)
0 głosów
2 odpowiedzi 1,960 wizyt
pytanie zadane 3 marca 2020 w JavaScript przez Wojtek Ćwiklik Nowicjusz (120 p.)

93,740 zapytań

142,675 odpowiedzi

323,294 komentarzy

63,319 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...