PNG и APNG — технические детали

в 6:56, , рубрики: PNG, обработка изображений, метки:

В сети мы часто видим высококачественные изображения, с альфа-каналом. Все это, как правило формат PNG (хотя бывает и SVG). Мало кто знает, что он и себя представляет. Сегодня с расскажу про формат PNG подробно.

Начало

Формат PNG состоит из чанков и сигнатуры. Каждый чанк состоит из длины, имени, содержимого и crc32.
Длина — 4 байта
Имя — 4 байта
Данные — X байт
CRC32 — 4 байта

Сигнатура состоит из восьми байтов из стоит всегда в начале файла.
137 80 78 71 13 10 26 10

Чанки

Эти чанки обязательны практически для каждого PNG файла.

IHDR

Цветовой тип, сжатие, чересстрочный ли он, определяется чанком IHDR. Чанк IHDR состоит из:
Ширина — 4 байта
Высота — 4 байта
Глубина цвета — 1 байт
Цветовой тип — 1 байт
Метод сжатия — 1 байт
Фильтр метод — 1 байт
Чересстрочность — 1 байт

IDAT

Об этом чанке я ничего говорить не буду. Этот чанк хранит пиксели в сжатом виде (DEFLATE).

IEND

Самый последний чанк в PNG. Стоит всегда в конце.

PLTE

Палитра для 256 цветного PNG.

tRNS

Определяет, какие цвета должны быть прозрачными. Доступен только для 24-битного PNG (бинарная прозрачность) и 8-битного PNG (каждый цвет в палитре может иметь свой цвет прозрачности).

APNG чанки

Анимированный PNG использует три необязательных чанка.

acTL

Как правило находится после IHDR. Хранит данные количестве кадров и проигрышей. Длина всегда 8 байт.

fdAT

Этот чанк хранит пиксели кадра APNG.
Номер чанка — 4 байта
Сжатые данные — X-4 байта

fcTL

Стоит как правило перед fdAT
4 байта — номер
4 байта — ширина
4 байта — высота
4 байта — позиция X
4 байта — позиция Y
2 байта — задержка (количестве кадров)
2 байта — задержка (количество секунд, если я не ошибаюсь)
1 байт — dispose (не знаю как перевести)
1 байт — смешивание

Советы по APNG

Формат APNG можно разобрать на кадры, основываясь на данных чанков. Каждый кадр имеет общую палитру, общий цветовой тип, общее сжатие. Однако это не один огромный спрайт, как многие могли подумать. Это самостоятельные сжатые данные внутри PNG.

Как достигается обратная совместимость APNG

Обратная совместимость достигается за счет использования необязательных чанков fdAT, fcTL и acTL (в одной статье даже описывалось необязательные и обязательные чанки подробно). Браузер, который не поддерживает APNG, просто игнорирует их. APNG иногда может отказать отображать обязательный IDAT (вместо него первый fdAT). Но браузер, который не поддерживает APNG, все же отображает IDAT.
Объясняется это тем, что такие APNG файлы, перед IDAT не имеют fcTL, из-за чего происходит игнор чанка IDAT браузером, который поддерживает APNG.

Как увидеть чанки PNG

1. Можно открыть PNG файл при помощи TweakPNG
2. Можно открыть любым HEX редактором

Вопрос по Web-программированию — как прочитать PNG данные

Чтобы, к примеру прочитать длину или еще какие-нибудь байты, вам придется использовать DataView на ArrayBuffer — это единственный верный способ. По другому вы не сможете вычитать длину, и прочие данные.

Еще один вопрос — можно ли получить строку из arraybuffer

Нужно получить Uint8Array и каждый элемент массива преобразовать в строку при помощи String.fromCharCode(number).

Автор: Alexei03a

Поделиться

* - обязательные к заполнению поля