Как определить реальные масштабы изображения в JavaScript

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

Как правило в таких ситуациях мы загружаем изображение не указывая размеров:

<img id="myimage" src="myimage.jpg" alt="my image" />

Картинка загрузиться с исходными размерами и нам надо всего-лишь добавить немного CSS чтобы она вела себя отзывчиво:

#myimage {
  max-width: 100%;
}

Но часто бывает так, что нам приходится манипулировать размерами изображения с помощью JavaScript. В таких ситуациях нам нужно определить реальные ширину и высоту для изображения. Но свойства width и height будут возвращать измененные в зависимости от viewport размеры:

var myimage = document.getElementById("myimage");
var w = myimage.width;	// current width, e.g. 400px
var h = myimage.height;	// current height, e.g. 300px

К счастью, современные HTML5 браузеры предоставляют два продвинутых свойства:

var rw = myimage.naturalWidth;	// real image width
var rh = myimage.naturalHeight;	// real image height

Эти свойства поддерживаются в IE9, Firefox, Chrome, Safari и Opera. Помните, что картинка должна быть полностью загружена, перед тем, как мы обратимся к этим свойствам.
Чтобы убедиться в этом, вы можете использовать событие “load” по отношению к window или использовать проверку на свойство .complete непосредственно у изображения, перед тем как получать значения ширины и высоты.

IE6, 7 и 8

.naturalWidth и .naturalHeight не поддерживаются в старых версиях Internet Explorer. Но мы можем определить действительные размеры, загружая изображение в память и определять стандартные высоту и ширину.

var myimage = document.getElementById("myimage");
 
if (typeof myimage.naturalWidth == "undefined") {
	// IE 6/7/8
	var i = new Image();
	i.src = myimage.src;
	var rw = i.width;
	var rh = i.height;
}
else {
	// HTML5 browsers
	var rw = myimage.naturalWidth;
	var rh = myimage.naturalHeight;
}

Оригинал статьи