Jak uzyskać oryginalną szerokość i wysokość obrazu za pomocą JavaScript?

By /

JavaScript

W programowaniu webowym często pojawia się potrzeba uzyskania oryginalnych wymiarów obrazu, na przykład do celów walidacji rozmiaru przed wysłaniem na serwer lub do dynamicznego dostosowywania layoutu strony. JavaScript oferuje proste metody, aby to osiągnąć, niezależnie od aktualnych wymiarów obrazu wyświetlanych na stronie.

Przykład: Uzyskiwanie oryginalnych wymiarów obrazu

W poniższym przykładzie przedstawiono, jak za pomocą JavaScript można uzyskać oryginalne wymiary obrazu. Kod składa się z prostego dokumentu HTML z obrazem oraz skryptu JavaScript, który po załadowaniu obrazu wyświetla jego oryginalną szerokość i wysokość.

Kod HTML i JavaScript
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Przykład uzyskania oryginalnych wymiarów obrazu</title>
</head>
<body>

<!-- Obraz, którego wymiary chcemy uzyskać -->
<img id="myImage" src="obraz.jpg" alt="Przykładowy obraz">

<script>
    // Funkcja wywoływana, gdy obraz zostanie załadowany
    function getImageOriginalDimensions() {
        // Uzyskanie referencji do obrazu
        const image = document.getElementById('myImage');

        // Utworzenie nowego obiektu Image
        const imgElement = new Image();

        // Ustawienie src obiektu Image na src obrazu z dokumentu
        imgElement.src = image.src;

        // Odczytanie oryginalnych wymiarów obrazu
        imgElement.onload = function() {
            const width = imgElement.width;
            const height = imgElement.height;
            console.log(`Oryginalna szerokość obrazu: ${width}px, oryginalna wysokość obrazu: ${height}px`);
        };
    }

    // Wywołanie funkcji po załadowaniu obrazu
    window.onload = getImageOriginalDimensions;
</script>

</body>
</html>

Jak to działa?

  1. Referencja do obrazu: Najpierw uzyskujemy referencję do obrazu w dokumencie za pomocą document.getElementById('myImage').
  2. Tworzenie nowego obiektu Image: Następnie tworzymy nowy obiekt Image, który pozwoli nam na manipulację i dostęp do właściwości obrazu w JavaScript.
  3. Ustawienie źródła obrazu: Przypisujemy do właściwości src nowego obiektu Image źródło obrazu z elementu <img> w dokumencie. Pozwala to na załadowanie obrazu w kontekście JavaScript, niezależnie od tego, jak jest on wyświetlany na stronie.
  4. Odczytanie wymiarów: W funkcji onload obiektu Image, która jest wywoływana po załadowaniu obrazu, odczytujemy jego oryginalne wymiary za pomocą właściwości width i height. Te właściwości zawierają oryginalne wymiary obrazu, nawet jeśli na stronie jest on wyświetlany w innych rozmiarach.

Podsumowanie

Uzyskanie oryginalnych wymiarów obrazu w JavaScript jest prostym zadaniem, które może być przydatne w wielu scenariuszach web developmentu. Przykład ten pokazuje, jak łatwo można to osiągnąć, wykorzystując obiekt Image i kilka linijek kodu. Taka wiedza jest szczególnie użyteczna przy walidacji rozmiarów obrazów przed ich przesłaniem na serwer lub przy dynamicznym dostosowywaniu interfejsu użytkownika w zależności od wymiarów obrazu.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top