Получить размеры загруженного изображения с помощью javascript / jquery?

Question

Также попробуйте это, но для меня это не работает.

Определение размера файла изображения + размеры с помощью Javascript?

Я загружаю изображение, вставляю его на страницу через jquery и хочу создать div вокруг вставленного изображения, но не знаю размеров изображения.

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
var img = document.getElementById('temp_image');
alert(img.clientWidth);

это покажет мне 0, что не так?

также попробовал:

var oImg = new Image();
oImg.src = 'uploads/obr1.jpg;
if (oImg.complete) {
  alert(oImg.width)
} 

это показывает мне 0 тоже.

где проблема? Спасибо

Answer 1

Должно быть:

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
var img = document.getElementById('tmp');
alert(img.clientWidth);

В настоящее время вы пытаетесь получить ширину содержащего элемента div (#temp_image), а не изображения.

Кроме того, если вы используете jQuery, вы можете просто сделать:

$("#temp_image").html('<img src="uploads/obr1.jpg" alt="" id="tmp" />');
alert($('#tmp').width());

Надеюсь это поможет!

Answer 2

Я попробовал ваш метод, и он работает. Вы просто не написали это хорошо. Вы забыли закрыть цитаты.

var oImg = new Image();
oImg.src = 'uploads/obr1.jpg';
if (oImg.complete) {
  alert(oImg.width)
}

Answer 3

var img = document.getElementById('temp_image');

на самом деле не получает элемент изображения, он получает элемент, содержащий изображение. Тебе стоит попробовать

var img = document.getElementById('tmp');

или же

var img = $('#tmp')[0];

вместо. Также убедитесь, что изображение действительно видно, когда вы получаете его размеры, как clientWidth а также clientHeight будет ноль, если элемент скрыт.