Как получить исходный размер изображения (ширину и высоту) в 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="//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>
