В сети мы часто видим высококачественные изображения, с альфа-каналом. Все это, как правило формат 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
