Height & width JavaScript?
"Ширина и высота картинки в JavaScript" или "height & width JavaScript?".
Подробно о высоте и ширине картинки в JavaScript
- Получаем размеры изображения в js
- Получаем размеры изображения в jQuery
- Получение изображения из type="file" js
Получаем размеры изображения в js
Начнем получение размеров изображения в JavaScript, нам потребуется для этого картинка:
В самом верху страницы вы видите логг сайта... если вы откроете код, то увидите вот такой код картинки:
Получим объект с помощью getElementById, обращаемся к id
Далее нам потребуется "clientWidth" для получения ширины картинки в js:
B "clientHeight" - для получения высоты картинки в js:
И выведем полученную высоту и ширину картинки в JavaScript с помощью document.write();, прямо в месте расположения скрипта...
Соберем весь код получения высоты и ширины картинки в 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 :
Получаем высоту изображения в jQuery :
Опять выведем ширину и высоту изображения в jQuery document.write();
Соберем весь код получения высоты и ширины картинки в 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>
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: