Как получить ширину и высоту моего изображения с помощью JavaScript?

Я пытаюсь получить мою ширину и высоту изображения, используя следующий код, но все, что я получаю, не определено.Как получить ширину и высоту моего изображения с помощью JavaScript?

Может ли кто-нибудь объяснить мне, как эта работа?

<script> 
var img = new Image(); 
img = document.getElementById("top"); 
alert(this.width + 'x' + this.height); 
</script> 
<body> 
    <div id="ad"> 
     <div id="banner"> 
      <img class="top" id="top" src="frame_2.jpg"/> 
     </div> 
    </div> 
</body>

источник

2015-11-05 Markus Hayner

'this' не то, что вы думаете,' this' есть. –

Вы уверены, что хотите написать 'this'? – messy

См. [Этот вопрос] (http://stackoverflow.com/q/623172/135978) для альтернативных способов получения информации в зависимости от того, какую версию «ширины» и «высоты» вы интересуете. –

this, скорее всего, указывают на Window в этом случае. Вместо этого попробуйте img.width и img.height.

источник

2015-11-05 15:46:33

или 'img .clientWidth' и 'img.clientHeight', если вы хотите реагировать на высоту и ширину. – ThisClark

Не говоря уже о лишнем 'new Image()' и не ожидая рендеринга изображения, а тем более нагрузки. Тьфу. – Luaan

Вы можете получить это с помощью clientWidth и clientHeight.

var width = img.clientWidth; 
var height = img.clientHeight;

См clientWidth и clientHeight

источник

2015-11-05 15:46:58 camelCase

Попробуйте это:

img = document.getElementById("top"); 
 
img.onload = function() { 
 
    alert(img.width + 'x' + img.height); 
 
};

<div id="ad"> 
 
     <div id="banner"> 
 
      <img class="top" id="top" src="http://fpoimg.com/300x300"/> 
 
     </div> 
 
    </div>

источник

2015-11-05 15:47:53 jcubic

Стоит отметить, что тег сценария должен появиться * после * 'img' или ждать' DOMContentReady' (иначе 'getElementById' вернет' null'). –

Это будет гонка, которая иногда будет проигрываться, особенно если изображение находится в кеше. –

Во-первых, если вы получаете изображение из документа, вам не нужно звоните new Image.

Вы: do необходимо подождать, пока не будет элемент img, и до img груза.

Это проще, если вы добавляете изображение со сценарием, и зацепить load событие перед тем установка src:

<body> 
    <div id="ad"> 
     <div id="banner"></div> 
    </div> 
<script> 
var img = document.createElement('img') 
img.className = "top"; 
img.id = "top"; 
img.onload = function() { 
    alert(this.width + 'x' + this.height); 
}; 
img.src="frame_2.jpg"; 
document.getElementById("banner").appendChild(img); 
</script> 
</body>

Вы можете сделать это с изображением в формате HTML, хотя, вы просто должно допускать возможность изображения может быть уже загружено, прежде чем зацепил событие:

<body> 
    <div id="ad"> 
     <div id="banner"> 
      <img class="top" id="top" src="frame_2.jpg"/> 
     </div> 
    </div> 
<script> 
var img = document.getElementById("top"); 
img.onload = loaded; 
if (img.complete) { 
    loaded(); 
} 
function loaded() { 
    if (img) { 
     alert(img.width + 'x' + img.height); 
     img.onload = null; 
     img = null; // Just as a marker in case of repeated calls 
    } 
}; 
</script> 
</body>

источник

2015-11-05 15:48:38

-2

Почему бы не попробовать простой jQuery?

var imageWidth = $('#top').width(); 
var imageHeight = $('#top').height(); 
alert(imageWidth + 'x' + imageHeight);

источник

2015-11-05 15:50:27 markoffden

Потому что это слишком много для этой задачи. –

И, кроме того, если ОП просто плюшевывает это, где их текущий код, он потерпит неудачу (по двум разным причинам). –

Вам не нужно, чтобы создать экземпляр изображения если позже вы переназначить эту переменную с элементом запрашиваемых на DOM ...

Кстати, вам нужно подождать Отель Dom Ready или окно Loaded (указывается для медиа-объектов) событие ...

document.addEventListener('DOMContentLoaded', function() { 
 
    var img = document.querySelector('.my-image'); 
 

 
    document.querySelector('#result').innerHTML = img.width + ' x ' + img.height; 
 
});

<h1 id="result"></h1> 
 

 
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" class="my-image" />

источник

2015-11-05 15:51:37 Hitmands

Нужно добавить 'img.onload' и записывать там - изображение не обязательно загружается при срабатывании' DOMContentLoaded'. (Я вижу «0 x 0» в примере прямо сейчас). –

Как я worte ниже, для медиа-объектов (например, изображений, видео, ecc.) Событие window.onload вернее ... Если вы присоедините событие к одному изображению, это не сработает с большим количеством изображений ... глобальное оконное событие отлично работает! – Hitmands

Я пытаюсь получить мою ширину и высоту изображения, используя следующий код, но все, что я получаю, не определено.

Это потому, что вы пытаетесь выбрать изображение в DOM перед тем он был создан.

Если вы хотите получить размеры изображения, вы можете сделать много способов.Если вы хотите просто проверить их, вы можете сделать инлайн:

<body> 
    <div id="ad"> 
     <div id="banner"> 
      <img class="top" id="top" src="frame_2.jpg" onload="console.log(this.width + ' x ' + this.height + ' px');"/> 
     </div> 
    </div> 
</body>

источник

2015-11-05 15:53:25 morels

Как получить ширину и высоту моего изображения с помощью JavaScript?

ответ

Смежные вопросы