Height & width JavaScript?

"Ширина и высота картинки в JavaScript" или "height & width JavaScript?".

Подробно о высоте и ширине картинки в JavaScript

1. Получаем размеры изображения в js
2. Получаем размеры изображения в jQuery
3. Получение изображения из type="file" js

Получаем размеры изображения в js

Начнем получение размеров изображения в JavaScript, нам потребуется для этого картинка:

В самом верху страницы вы видите логг сайта... если вы откроете код, то увидите вот такой код картинки:

<img src="https://dwweb.ru/__img/__dates/logo.png" alt="alt" title="ГЛАВНАЯ" id="main_logo">

Получим объект с помощью getElementById, обращаемся к id

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

Далее нам потребуется "clientWidth" для получения ширины картинки в js:

var width = img.clientWidth;

B "clientHeight" - для получения высоты картинки в js:

var height = img.clientHeight;

И выведем полученную высоту и ширину картинки в JavaScript с помощью document.write();, прямо в месте расположения скрипта...

document.write('Ширина картинки '+ width +'px + Высота картинки '+ height + 'px');

Соберем весь код получения высоты и ширины картинки в JavaScript

<script>

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

var width = img.clientWidth;

var height = img.clientHeight;

document.write('Ширина картинки '+ width +'px + Высота картинки '+ height+ 'px');

</script>

Живой пример получения высоты и ширины картинки в JavaScript

Возьмем выше приведенный код и поместим его прямо здесь в коде:




Получаем размеры изображения в jQuery

Сверху я разобрал получение картинки в js? теперь повторим тоже самое в jQuery,для этого нам понадобится...

Первое, что естественно нужно сделать это - подключить jquery

Не будем растягивать как в js... напишем коротко:

Получаем ширину изображения в jQuery :

var imgwidth = $('#main_logo').prop('width');

Получаем высоту изображения в jQuery :

var imgheight = $('#main_logo').prop('height');

Опять выведем ширину и высоту изображения в jQuery document.write();

document.write('Ширина картинки '+ imgwidth +'px + Высота картинки '+ imgheight + 'px');

Соберем весь код получения высоты и ширины картинки в jQuery

<script>

var imgwidth = $('#main_logo').prop('width');

var imgheight = $('#main_logo').prop('height');

document.write('Ширина картинки '+ imgwidth +'px + Высота картинки '+ imgheight + 'px');

</script>

Пример работы кода получения высоты и ширины картинки в jQuery

Разместим выше приведенный код прямо здесь:




Получение изображения из type="file" js

Для того, чтобы протестировать работу скрипта по определению ширины и высоты из поля ввода type="file" - выберите файл... на компьютере...

Код получения высоты и ширины картинки в js из type="file"

<input type="file" id="userfile">

<script>

function getSize()

{

var file = document.getElementById('userfile').files[0];

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {

var image = new Image();

image.src = e.target.result;

image.onload = function () {

var width = this.width;

var height = this.height;

alert(width + ' ' +height);

};

};

}

document.getElementById('userfile').addEventListener('change', getSize);

</script>