СКРИПТЫ
ТЕГИ:
php (285)
js (155)
html (135)
css (109)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (30)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
hosting (17)
board (17)
js method (16)
html book (16)
php file (16)
color (15)
php date (15)
link (15)
js events (14)
input (14)
osclass (13)
table (13)
htaccess (13)
dw block (12)
path (12)
select (12)
php img (11)
form (11)
php time (11)
jsphp (11)
icon (11)
js delete (11)
download (11)
notepad (11)
mouse (10)
img (10)
url (10)
js time (9)
info (9)
yandex (9)
dosite (7)
hover (7)
cookie (7)
comment (7)
task (7)
php url (7)
js url (6)
mysql (6)
year (6)
click (6)
list (6)
iframe (6)
browser (5)
search (5)
ftp (5)
chart (5)
adminka (5)
php get (5)
value (5)
mb (5)
week (4)
console (4)
vk (4)
bbcode (4)
symbols (4)
js form (4)
js id (4)
mounth (4)
submit (4)
reg.ru (4)
scandir (3)
line (3)
pages (3)
https (3)
js post (3)
ucoz (3)
js img (3)
padding (3)
day (3)
captcha (3)
vs code (3)
ssl (3)
second (2)
cursor (2)
tag hr (2)
money (2)
рся (2)
height (2)
js vars (2)
title (2)
counter (2)
typeof (2)
details (2)
youtube (2)
video (2)
base64 (2)
seo (2)
qr kod (2)
arrows (2)
sitemap (2)
smile (1)
google (1)
windows (1)
archive (1)
domen (1)
numbers (1)
speed (1)
books (1)
scroll (1)
header (1)
days (1)

height & width JavaScript?

14.04.2022 Марат 121 0 js | js_img | img |
"Ширина и высота картинки в JavaScript" или "height & width JavaScript?".

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

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

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

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

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

    <img src="//dwweb.ru/___file_cms/img/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

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


  2. Получаем размеры изображения в 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

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


  3. Получение изображения из 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>

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Последние комментарии :
Марат :
28.04.2022 19:20
У меня на сайте - все скрипты рабочие! Приходите…
подробнее.
Игорь :
05.04.2022 03:52
Спасибо Большое Вам за счетчик скачиваний файлов! Вы единственный, кто выложил действительно рабочий код!…
подробнее.
Марат :
03.04.2022 11:16
Вы обратились не по адресу... Предположим... что у вас есть паравоз...на дровах... И вы обращаетесь в автосервис, …
подробнее.
Good_Serpent :
03.04.2022 08:18
Шара - "расшаренная", доступная для пользователей локальной сети папка. Там происходит обмен информацией,…
подробнее.
Марат :
02.04.2022 20:29
Я даже не знаю, что таоке "шара"... Думаю, что вам нужно искать на специализированном сайте посвященной…
подробнее.
Good_Serpent :
02.04.2022 19:54
Здравствуйте! Нужен скрипт, который бы закрывал файл на шаре, если он там открыт. Не удаётся его удалить для…
подробнее.
ruweb
Страница загружена за : 0.019142 секунд. Подробнее