Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> [Jquery,JS] как определить размер (в кб) картинки? 
:(
    Опции темы
gcc
Дата 1.8.2010, 04:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



как определить размер (в кб) картикни / изображения??

размер ширины и длинны работает:
Код

 
        var newImg = new Image();
        var height, width;

        newImg.onload = function() {
     height = newImg.height;
     width = newImg.width;

        };

        newImg.src = 'file://localhost/usr/home2/di/11/p/29/1.jpg'; 

    var height = newImg.height;
     var width = newImg.width;

     var size = newImg.size;
    

                    
    alert ('The image size is '+size+'*'+height);                    
                    
          $(".info").html( " "+width+" x "+height+", "+size+" Кбайт ");    



а как определить именно размер картинки в кб?

вроде бы CSS ДОМ сохраняет это...?

очень желательно определить размер на Javascript...

Это сообщение отредактировал(а) gcc - 1.8.2010, 04:32
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 13:30 (ссылка) |    (голосов:1) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



Если есть возможность, можно привлечь AJAX.

Это лишь пример, доработать в смысле асинхронности/кросбраузерности можете сами, если это подойдет.
Код

function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
}


Пример использования:
Код

<p onclick="alert(getImageSizeInBytes('image.jpg'));">get image size</p>

PM   Вверх
gcc
Дата 1.8.2010, 19:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



Amphiluke

подскажите, пожалуйста, как поставить эту функцию в код?


данный участок выводит в alert:
Код

NaN


Код

        <script type="text/javascript"> 
            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.content').css('display', 'block');
 
 
        var newImg = new Image();
        var height, width;

        newImg.onload = function() {
     height = newImg.height;
     width = newImg.width;

        };

        newImg.src = 'file://localhost/usr/home2/di/11/p/29/1.jpg'; 

    var height = newImg.height;
     var width = newImg.width;

     var size = newImg.size;
    

function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
}

    alert(getImageSizeInBytes('file://localhost/usr/home2/di/11/p/29/1.jpg'));                
                    
//    alert ('The image size is '+size+'*'+height);                    
                    
          $(".info").html( " "+width+" x "+height+", "+size+" Кбайт ");    
                
    
  
    




Это сообщение отредактировал(а) gcc - 1.8.2010, 19:39
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 20:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



gcc, к сожалению, AJAX не будет работать с файлами в локальной файловой системе. Файл картинки должен лежать на сервере. Никаких префиксов file://
Поэтому я и говорил, 
Цитата(Amphiluke @  1.8.2010,  17:30 Найти цитируемый пост)
Если есть возможность


PM   Вверх
gcc
Дата 1.8.2010, 20:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



Amphiluke, странца index.html стоит у меня на компьютере, и я прописал полный путь к файлу 
Код

file://localhost/usr/home2/di/11/p/29/1.jpg


разрешение, ширина и длинна - работает отлично... (в примере котором я привел)

а почему нельзя Ваш пример использовать?

фото галерея довольно сложная на Jquery, я не знаю куда поставить вот это:
Код

<p onclick="alert(getImageSizeInBytes('image.jpg'));">get image size</p>



нужно вот этот onclick куда-то поставить??

Добавлено через 1 минуту и 53 секунды
а в объекте 
Код

new Image();


нету ли свойства чтобы узнать размер?
тут про него написано http://www.devguru.com/technologies/ecmasc...kref/image.html

но я не могу там найти и понять...

Это сообщение отредактировал(а) gcc - 1.8.2010, 20:28
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 20:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



Мне не известны свойства объекта HTMLImageElement, которые могли бы помочь определить размер картинки в байтах. Возможно, такого свойства просто нет.

Тот пример, что я вам привел, будет работать, когда вы файл картинки закинете на сервер. Он не будет работать в локальной файловой системе вашего компьютера, если только вы не установите веб-сервер на своем компьютере, потому что объект XMLHttpRequest умеет обращаться только с HTTP-запросами.

Добавлено через 2 минуты и 22 секунды
Функцию getImageSizeInBytes вовсе не обязательно вызывать по какому-то событию типа click. Я только пример привел. Вы можете вызывать ее из любого места сценария, функция вернет размер картинки в байтах.
PM   Вверх
gcc
Дата 1.8.2010, 20:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



я поставил на сервер

Код


<script type="text/javascript"> 


            jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.content').css('display', 'block');
 
 
        var newImg = new Image();
        var height, width;

        newImg.onload = function() {
     height = newImg.height;
     width = newImg.width;

        };

        newImg.src = 'http://x0.org.ua/test/p/29/1.jpg'; 

    var height = newImg.height;
     var width = newImg.width;

     var size = newImg.size;
    


function getImageSizeInBytes(imgURL) {
    var request = new XMLHttpRequest();
    request.open("HEAD", imgURL, false);
    request.send(null);
    var headerText = request.getAllResponseHeaders();
    var re = /Content\-Length\s*:\s*(\d+)/i;
    re.exec(headerText);
    return parseInt(RegExp.$1);
}


    alert(getImageSizeInBytes('http://x0.org.ua/test/p/29/1.jpg'));                
                    
//    alert ('The image size is '+size+'*'+height);                    
                    
          $(".info").html( " "+width+" x "+height+", "+size+" Кбайт ");    
                



это правильно?

оно выводит NaN

Добавлено @ 20:54
вот галерея http://x0.org.ua//gallery_test/index.html

Это сообщение отредактировал(а) gcc - 2.8.2010, 04:01
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 20:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



Ваш документ HTML, содержащий этот код, также обязан лежать на том же сервере. Это так?
PM   Вверх
gcc
Дата 1.8.2010, 20:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



да, именно

вот http://x0.org.ua/test/index.html

исходники  http://x0.org.ua/test

Это сообщение отредактировал(а) gcc - 1.8.2010, 20:58
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 21:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



gcc, у меня работает. Показало 126792 байт.

Добавлено через 9 минут и 15 секунд
А в FF почему-то абсолютно пустая страничка. Инспектор DOM показывает, что всё содержимое документа заключено в комментарий. Поэтому девственная пустота. 
PM   Вверх
gcc
Дата 1.8.2010, 21:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



Цитата(Amphiluke @ 1.8.2010,  21:04)
gcc, у меня работает. Показало 126792 байт.

Добавлено @ 21:13
А в FF почему-то абсолютно пустая страничка. Инспектор DOM показывает, что всё содержимое документа заключено в комментарий. Поэтому девственная пустота.

"нспектор DOM показывает, что всё содержимое документа заключено в комментарий"


а что это значит?

что за комментарий, можно как-то выключить?

Добавлено через 2 минуты и 16 секунд
opera 9.64 не выводит

а в IE работает?
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 21:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



gcc, я проверил в Opera, IE, Chrome. Везде показало 126792 байт.

В FF чистая страничка. У вас там в коде комментарии типа
Цитата
Код

<!---------------------- something -------------------------->


FF у меня считает такой комментарий незакрытым и помещает всё дальнейшее содержимое в комментарий. Поэтому ничего у меня не отображается. Используйте лучше нормальные символы комментариев
Код

<!-- something -->


PM   Вверх
gcc
Дата 1.8.2010, 22:15 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



Amphiluke,  спасибо, работает!

извините, про "комментарий" я не понял просто, я думал что это какой-то космический "комментарий" в DOM  smile 


...правда в opera 9.64 не работает, видимо это только у меня, может версия сборки браузера старая... но это не важно...
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 1.8.2010, 22:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



Цитата(gcc @  2.8.2010,  02:15 Найти цитируемый пост)
.правда в opera 9.64

А я проверял в Opera 9.63 и всё OK. smile
PM   Вверх
gcc
Дата 1.8.2010, 22:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



тогда видимо только у меня такая проблема:

Цитата

Версия:
9.64
Сборка:
2480
Платформа:
FreeBSD
Система:
i386, 8.0-CURRENT
Библиотека Qt
3.3.8
Версия Java:
Установлена Java Runtime Environment
Идентификация браузера:

Opera/9.64 (X11; FreeBSD 8.0-CURRENT i386; U; ru) Presto/2.1.1

PM WWW ICQ Skype GTalk Jabber   Вверх
gcc
Дата 2.8.2010, 04:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



я хочу добавить в Open source галерею, вот ее сайт http://www.twospy.com/galleriffic/

======

я еще исправил несколько ошибок....

http://x0.org.ua/gallery_test/index.html

а помогите протестирвоать на разных браузерах?

по-моиму оно глючит часто почему-то или нет??

нажмите, пожалуйста, несколько раз  (3-6 раз) по превью и по большой картинке... нормально, ли? видно ли разрешение и размер всегда?


Это сообщение отредактировал(а) gcc - 2.8.2010, 04:11
PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 2.8.2010, 09:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



gcc, сразу первый не оч. хороший момент… В килобайте 1024 байта, а не 1000. smile  Ну и при выводе размера картинки три значащих цифры после запятой — ни к чему. Используйте метод toFixed() для обрезки, к примеру, до двух знаков после запятой.

Добавлено через 8 минут и 11 секунд
Еще: запрос, на мой взгляд, лучше делать асинхронный. Я вам дал пример синхронного только лишь ради экономии времени и места.
PM   Вверх
Amphiluke
Дата 2.8.2010, 09:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



В FF размер картинки (в Кб) обновляется только при клике на большую, картинку. А при нажатии на маленькие размер не обновляется, хотя большая картинка сменяется. smile
PM   Вверх
gcc
Дата 2.8.2010, 09:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



у меня в FF3.0 отлично работает, в opera NaN

тут товарищ http://unixforum.org/index.php?s=&show...t&p=1087064 говорит, что же в opera и хроне не работает, тоже...


разные браузеры по рпзному этот код определяеют?

а можно ли узнать почему опера размер в кб не определяет?

нужно смотреть ее стандарты?

Это сообщение отредактировал(а) gcc - 2.8.2010, 09:58
PM WWW ICQ Skype GTalk Jabber   Вверх
gcc
Дата 8.8.2010, 00:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Агент алкомафии
****


Профиль
Группа: Участник
Сообщений: 2691
Регистрация: 25.4.2008
Где: %&й

Репутация: нет
Всего: 17



Цитата(Amphiluke @ 2.8.2010,  09:30)
В FF размер картинки (в Кб) обновляется только при клике на большую, картинку. А при нажатии на маленькие размер не обновляется, хотя большая картинка сменяется. smile

это в какой FF?

FF3.0 нормально...

кстате, я забыл что опера9 устарела...

может кто-то зайти с опера10 посмотреть?


PM WWW ICQ Skype GTalk Jabber   Вверх
Amphiluke
Дата 8.8.2010, 11:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



gcc,
вот, закинул на временный хостинг тестовую страничку (будет доступна ~10дней). Проверил во всех доступных мне браузерах:
  • FF 3.5.4
  • Opera 9.63
  • IE 7.0
  • Google Chrome

Везде размер показывает правильно.
Посмотрите тоже. Если и на тестовой страничке у вас будут проблемы, значит, дело в системе или еще где, хз.
А вообще — экспериментируйте, попробуйте уже что-ли асинхронный запрос разнообразия ради. smile 
PM   Вверх
Amphiluke
Дата 8.8.2010, 12:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112



Я тут еще заметил, что иногда Opera пишет NaN вместо размера, если картинка уже закеширована браузером.
Поэтому исправить ситуацию удается, например, добавлением случайного числа к URL картинки…
Код

getImageSizeInBytes(imgURL + "?rnd=" + (Math.random() * 100000).toString())

PM   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.1290 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.