VPF::[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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

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>

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 1.8.2010, 20:08 (ссылка)

(нет голосов)

Загрузка ...

☽

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

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

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

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

)

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

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 1.8.2010, 20:40 (ссылка)

(нет голосов)

Загрузка ...

☽

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

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

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

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

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

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 1.8.2010, 20:56 (ссылка)

(нет голосов)

Загрузка ...

☽

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

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

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

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 1.8.2010, 21:04 (ссылка)

(нет голосов)

Загрузка ...

☽

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

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

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

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

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 работает?

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

Amphiluke

Дата 1.8.2010, 21:58 (ссылка)

(нет голосов)

Загрузка ...

☽

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

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

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

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

Цитата

Код


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

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

Код


<!-- something -->

gcc

Дата 1.8.2010, 22:15 (ссылка)

(нет голосов)

Загрузка ...

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

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

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

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

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

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

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

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

--------------------

Perl FAQ
freelance
perl, jquery, js, php
perl, jquery

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »