Реализации Прогрессивной Загрузки Изображений

В статье рассказывается о возможностях собственной реализации прогрессивной загрузки изображений на сайте без использования Flash. Интерактивное рисование реализовано через элемент: холст из HTML5. Алгоритмической основой процесса является дискретное вейвлет-преобразование.

Реализации прогрессивной загрузки изображений

Загрузка изображения в стандартном формате браузером jpg , мы видим рисунок сверху вниз по мере поступления данных.

Это простейший пример прогрессивной загрузки.

Не знаю, по какой причине был проигнорирован вариант с рисованием от центра по спирали, актуальный для просмотра большинства фотографий.

Идея прогрессивной загрузки получила дальнейшее развитие в стандарте прогрессивный jpg .

В Интернете встречается довольно редко, хотя этот формат уже давно поддерживается всеми основными браузерами.

Рисование происходит покадрово с выраженной мозаичной структурой – особенности стандарта jpg .

Мы попробуем пойти дальше и обратить внимание на формат jpeg2000. В отличие от jpg вместо косинусного преобразования в jpeg2000 Используется вейвлет-преобразование, которое дает более высокую степень сжатия при той же частоте ошибок и меньшем блокировании артефактов.

Википедия утверждает, что поддерживает прогрессивную загрузку с рождения, но автор ни разу не видел этого в действии.

Более того, все примеры jpeg2000 , который нам удалось найти в Интернете, не открывался в браузерах (Chrom 18, Explorer 9, Firefox 11).

На сайте fileinfo.com содержится информация о том, что браузеры под Windows не открывают формат jp2. Учитывая, что формат хоть и хорош, но пока толком не поддерживается и может быть отягощен скрытыми патентами, мы попробуем реализовать свой вариант прогрессивной загрузки на основе вейвлет-преобразования.

Берем изображение, у которого высота и ширина равны степеням 2 (ограничение алгоритма, как его обойти, рассматривать не будем).

В нашем случае это черно-белая карта шириной и высотой 1024 пикселя.

Пишем программу многоуровневого двумерного вейвлет-преобразования.

Код прилагается: связь .

Используется вейвлет Хаара, хотя в коде можно выбрать любой ортогональный вейвлет-фильтр и даже диадические вейвлеты, о которых обязательно будет написано, когда будет успешный пример применения.

Всем, кому необходимо разобраться в алгоритме или самих вейвлетах, рекомендую книгу С.

Малла.

Вейвлеты в обработке сигналов .

Запускаем программу, указываем изображение.

Получение файлов текст , где хранятся квантованные (нужные для уменьшения громкости) вейвлет-коэффициенты с одинаковыми уровнями (в примере 5 уровней) и типами детализации.

Загружаем их на сервер.

Мы создаем HTML страница с объектом холст и в событии загрузки страницы пишем скрипт для пошаговой загрузки ранее созданных файлов вейвлет-коэффициентов.

При каждой загрузке файла будет вызываться функция восстановления изображения (обратное вейвлет-преобразование).

Давайте посмотрим, что произошло: ссылка_1(2 Мб) .

Сразу признаюсь, что изображение загружается раз в 10 медленнее оригинала.

Дело в том, что квантованные коэффициенты сохранялись в файлах в виде текста и занимали на порядок больше места.

Также необходимо было применить код Хаффмана или полное сжатие коэффициентов.

Браузер Explorer не хочет отображать изменения в холст пока скрипт работает. В Chrome дела обстоят немного лучше; если вставить, скажем, оповещения, этапы будут видны( ссылка_2(2 Мб) ).

Если код выполняется монотонно, то поведение аналогично Проводнику.

Меня радует предсказуемость выполнения кода Firefox, поэтому советую посмотреть ссылку 1. Можно с уверенностью сказать, что с помощью HTML5 можно реализовать прогрессивную загрузку, и что современные браузеры сносно справляются с трудоемкими математическими вычислениями (на современном компьютере).

Остается открытым вопрос о своевременной визуализации произошедшего в холст изменения и актуальность темы прогрессивной нагрузки в целом.

Как было отмечено ранее, не так часто можно увидеть на сайте прогрессивный jpg , а браузеры вообще не поддерживают jp2. Теги: #прогрессивная загрузка #html5 #wavelet #JavaScript #программирование #обработка изображений