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

У меня есть этот код:

var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;

Однако это дает мне атрибуты html - стили css. Я хочу получить размеры фактического ресурса изображения, файла.

Мне нужно это, потому что при загрузке изображения ширина становится равной 0px, и я не знаю, почему и где это происходит. Чтобы предотвратить его, я хочу получить фактическое измерение и reset их. Возможно ли это?

Изменить: даже когда я пытаюсь получить naturalWidth, я получаю 0. Я добавил фотографию. Странно то, что это происходит только тогда, когда я загружаю новые файлы, а после обновления он работает так, как должен.

http://oi39.tinypic.com/3582xq9.jpg

Ответ 1

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

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

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

Это поддерживается только с IE9 и выше, если вам нужно поддерживать старый браузер, вы можете создать новое изображение, установить его источник на одно и то же изображение, и если вы не измените размер изображения, он вернется естественный размер изображения, так как это будет по умолчанию, если не задан другой размер

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

FIDDLE

Ответ 2

Есть img.naturalHeight и img.naturalWidth, которые дают вам ширину и высоту самого изображения, а не элемент DOM.

Ответ 3

Вы можете использовать следующую функцию, которую я сделал.

Функция

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

HTML:

<img id="myimage" src="foo.png">

используйте его так

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions