Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > [Jquery,JS] как определить размер (в кб) картинки?

Автор: gcc 1.8.2010, 04:31

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

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

Код


 
        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...

Автор: Amphiluke 1.8.2010, 13:30

Если есть возможность, можно привлечь 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>

Автор: gcc 1.8.2010, 19:38

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+" Кбайт ");

Автор: Amphiluke 1.8.2010, 20:08

gcc, к сожалению, AJAX не будет работать с файлами в локальной файловой системе. Файл картинки должен лежать на сервере. Никаких префиксов file://
Поэтому я и говорил,

Цитата(Amphiluke @ 1.8.2010, 17:30

)

Если есть возможность

Автор: gcc 1.8.2010, 20:27

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/ecmascript/quickref/image.html

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

Автор: Amphiluke 1.8.2010, 20:40

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

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

Добавлено через 2 минуты и 22 секунды
Функцию getImageSizeInBytes вовсе не обязательно вызывать по какому-то событию типа click. Я только пример привел. Вы можете вызывать ее из любого места сценария, функция вернет размер картинки в байтах.

Автор: gcc 1.8.2010, 20:52

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

Код



<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

Автор: Amphiluke 1.8.2010, 20:56

Ваш документ HTML, содержащий этот код, также обязан лежать на том же сервере. Это так?

Автор: gcc 1.8.2010, 20:57

да, именно

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

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

Автор: Amphiluke 1.8.2010, 21:04

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

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

Автор: gcc 1.8.2010, 21:36

Цитата(Amphiluke @ 1.8.2010, 21:04)

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

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

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

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

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

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

а в IE работает?

Автор: Amphiluke 1.8.2010, 21:58

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

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

Цитата

Код


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

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

Код


<!-- something -->

Автор: gcc 1.8.2010, 22:15

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

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

...правда в opera 9.64 не работает, видимо это только у меня, может версия сборки браузера старая... но это не важно...

Автор: Amphiluke 1.8.2010, 22:18

Цитата(gcc @ 2.8.2010, 02:15

)

.правда в opera 9.64

А я проверял в Opera 9.63 и всё OK. smile

Автор: gcc 1.8.2010, 22:19

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

Цитата

Версия:
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

Автор: gcc 2.8.2010, 04:11

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

======

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

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

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

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

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

Автор: Amphiluke 2.8.2010, 09:11

gcc, сразу первый не оч. хороший момент… В килобайте 1024 байта, а не 1000. smile

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

Добавлено через 8 минут и 11 секунд
Еще: запрос, на мой взгляд, лучше делать асинхронный. Я вам дал пример синхронного только лишь ради экономии времени и места.

Автор: Amphiluke 2.8.2010, 09:30

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

Автор: gcc 2.8.2010, 09:56

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

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

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

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

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

Автор: gcc 8.8.2010, 00:42

Цитата(Amphiluke @ 2.8.2010, 09:30)

это в какой FF?

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

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

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

Автор: Amphiluke 8.8.2010, 11:11

gcc,
вот, закинул на временный хостинг http://getimgsize-com.1gb.ru/index.html (будет доступна ~10дней). Проверил во всех доступных мне браузерах:

FF 3.5.4
Opera 9.63
IE 7.0
Google Chrome

Везде размер показывает правильно.
Посмотрите тоже. Если и на тестовой страничке у вас будут проблемы, значит, дело в системе или еще где, хз.
А вообще — экспериментируйте, попробуйте уже что-ли асинхронный запрос разнообразия ради. smile

Автор: Amphiluke 8.8.2010, 12:34

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

Код


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