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 19:20

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

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

Snipe 21.11.2011 19:36

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

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

Den1xxx 21.11.2011 19:39

Цитата:

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

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

trikadin 21.11.2011 19:41

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

Den1xxx 21.11.2011 20:25

Цитата:

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

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

trikadin 21.11.2011 21:14

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

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

Den1xxx 21.11.2011 21:33

Цитата:

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

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

FreeStyler 09.05.2012 13: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 14: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 15:01

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


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