Как получить исходный размер изображения (ширину и высоту) в JavaScript

Вы можете легко найти исходную или внутреннюю ширину и высоту изображения, используя HTML5-свойства изображений naturalWidth и naturalHeight. Эти свойства поддерживаются во всех основных веб-браузерах, таких как Chrome, Firefox, Safari, Opera, Internet Explorer 9 и выше.

Давайте посмотрим на пример, чтобы понять, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Find Real Image Width and Height</title>
<script>
    function imgSize(){
        var myImg = document.querySelector("#sky");
        var realWidth = myImg.naturalWidth;
        var realHeight = myImg.naturalHeight;
        alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
    }
</script>
</head>
<body>
    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
    <p><button type="button" onclick="imgSize();">Получить исходный размер изображения</button></p>
</body>
</html>

В качестве альтернативы, если вы хотите выполнить ту же задачу с помощью jQuery, вы можете использовать метод load() в сочетании с методом attr(), как показано в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Real Image Dimensions</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var img = $("#sky");
        // Получаем реальную ширину и высоту
        $("<img>").attr("src", $(img).attr("src")).load(function(){
            var realWidth = this.width;
            var realHeight = this.height;
            alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
        });
    });   
});
</script>
</head>
<body>
    <img src="sky.jpg" id="sky" width="250" alt="Cloudy Sky">
    <p><button type="button">Получить исходный размер изображения</button></p>
</body>
</html>

Читайте также

Похожие примеры: