Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Как узнать реальный размер изображения. (https://javascript.ru/forum/dom-window/23376-kak-uznat-realnyjj-razmer-izobrazheniya.html)

Den1xxx 21.11.2011 17:20

Как узнать реальный размер изображения.
 
Вопрос из серии "а возможно ли".
В комментарии парсится изображение
<img width="300px" alt="archive.png" src="./uploads/archive.png">

Движком в коде картинки задается ширина отображения, чтобы пользователь в комментах не испортил дизайн.
А возможно ли получить её реальную ширину?
Чтобы не растягивалась при парсинге, если например реальная картинка меньше 300px.

Snipe 21.11.2011 17:36

Мне кажется, вам не в JS надо размер картинки узнавать, а на сервере.

А так вообще вроде можно картинку грузить в невидимом диве, например, и после загрузки узнать её высоту и ширину через атрибуты.
М.б. кто-то предложит более элегантный способ.

Den1xxx 21.11.2011 17:39

Цитата:

Сообщение от Snipe (Сообщение 138195)
Мне кажется, вам не в JS надо размер картинки узнавать, а на сервере.

Картинка не обязательно может быть вставлена с моего сервера.
Поэтому решать лучше на стороне клиента.
В невидимом диве — это вариант конечно, но когда картинок 20 на странице, получится г..нокод.

trikadin 21.11.2011 17:41

То есть вам нужно, чтобы картинки не были больше, скажем, 300 пикселей? Так используйте css. Что-то вроде:
img {
max-width: 300px;
height: auto;
}

Den1xxx 21.11.2011 18:25

Цитата:

Сообщение от trikadin
вам нужно, чтобы картинки не были больше, скажем, 300 пикселей

Нет, мне нужно чтобы картинки не были растянуты больше их истинного размера.
То есть если картинка больше 300px, то ей присваивается ширина 300px, если меньше — остаётся первоначальный размер.
Или мне нужен ответ, что этого сделать нельзя — узнать истинный размер картинки на яваскрипт.

trikadin 21.11.2011 19:14

"Истинный" размер узнаётся через offsetWidth/offsetHeight.

А то, что вам нужно - это тот стиль, что я скинул.

Den1xxx 21.11.2011 19:33

Цитата:

Сообщение от trikadin
размер узнаётся через offsetWidth

Спасибо, поковыряю на досуге.

FreeStyler 09.05.2012 12:01

Den1xxx, ну как поковырял??))
Тоже такая проблемка встала

<img onclick="this.width=this.offsetWidth" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="200">


что-то никак, дык что никак не узнать реальный размер после изменения??

UPD: В лисе работает метод .naturalWidth
И тут материальчик есть по этой теме http://www.jacklmoore.com/notes/natu...alheight-in-ie

vadim5june 09.05.2012 13:23

После изменения вот так можно получить размер
function f(src){var img=new Image();
img.onload=function(){alert(this.width)};
img.src=src}
---
<img onclick="alert(this.offsetWidth);f(this.src)"
src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" width="200">

Раед 09.05.2012 14:01

Den1xxx,
Истиный размер узнаётся через naturalWidth/naturalHeight. Но, это, по-моему, не кроссбраузерно.


Часовой пояс GMT +3, время: 14:17.