- PVSM.RU - https://www.pvsm.ru -
С давних времен, на страницах интернета используются растровые (а ныне и векторные) изображения. Без них интернет был бы скучным и однообразным, был бы абстрактным, не понятным. Однако изображения требуют сжатия, поскольку в сыром виде имеют большой размер и их трудно передавать от сервера клиенту. Под катом — «текстовый» курс про JNG формат.
Сегодня мы можем использовать только три растровых формата: PNG, JPEG и GIF.
JPEG — формат для хранения фотографий. Сжимает с потерями качества, альфа-канал не поддерживает.
PNG — формат для хранения графиков. Сжимает без потерь по алгоритму DEFLATE. Поддерживает альфа-канал, но не пригоден для распечатки из-за отсутствия поддержки CMYK. Используется, как правило, только в Web-страницах. Создан как замена GIF, но при этом, не поддерживает анимацию.
GIF — формат изображений для интернета. Существовал в Web 1.0, но перекочевал в последующие из-за широкой поддержкой браузером IE и поддержки анимации. Поддерживает 256 цветов (хотя известны способы обойти). Поддерживает всего один цвет прозрачности.
SVG — формат векторных изображений. Имеет узкую поддержку, если использовать как изображение. Для более широкой поддержки нужно использовать как приложение (апплет).
Google разрабатывает формат WebP, который совмещает возможности сжатия без потерь и сжатия с потерями, поддержку альфа-канала, цветовых профилей, анимацию. Однако браузеры не смешать вводить его поддержку. Кроме того, этот формат, как и JPEG или PNG, сложен в декодировании. Вероятно, этот формат не будет так ширико популярным еще ближайшие 20 лет.
В наше время можно использовать HTML5 Canvas для отображения «кастомных» изображений, анимаций, также можно использовать в качестве «дисплея» любого веб-приложения. Но из-за отсутствия поддержки в IE, люди вынуждены искать обходные пути (например использовать Flash от Adobe).
Разработчики libpng разработали формат MNG, а вместе с ним JNG. MNG должен был добавить в Web поддержку сложной и высококачественной анимации. Однако эти форматы продержались не долго. Вскоре их заместил Flash.
JNG — это часть спецификации формата MNG. Это контейнер для одного или двух изображений (один из которых — альфа-канал). Как и PNG, имеет чанковую структуру. Отличается только тем, что хранит RGB в отдельном поток, закодированном как JPEG изображение и альфа-канал как данные PNG (серая шкала) или JPEG изображение.
JNG был бы полезен для фотографий, где необходим альфа-канал. В современном Web можно использовать Canvas или SVG, но JNG был более полезен, поскольку его можно создать при помощи плагина фотошопа или получить при помощи ImageMagick.
Ссылаясь на спецификацию, JNG состоит из сигнатуры (8 байт) и чанков (chunks). Его основные чанки:
JHDR — заголовок изображения
JDAT — закодированное JPEG изображение
IDAT — PNG данные (альфа-канал)
JDAA — JPEG изображение (альфа-канал)
IEND — конец файла
Каждый чанк состоит из:
Длина — 4 байта
Имя — 4 байта (ANSII)
Данные — Длина байт
CRC32 — 4 байта
JHDR данные содержит следующие байты:
4 байта ширина,
4 байта высота,
1 байт цветовой тип,
1 байт глубина основного потока,
1 байт компрессия JPEG,
1 байт чересстрочность,
1 байт глубина альфа-канала,
1 байт сжатия альфа-канала (JPEG или PNG),
1 байт фильтрация альфа-канала (только если PNG),
1 байт чересстрочность альфа-канала.
Наша основная задача — разобрать JNG изображение на два или один файл.
Самое сложное — собрать альфа-канал, закодированный в PNG. Ведь PNG состоит следующим образом:
IHDR, IDAT, IEND
Где IHDR:
4 байта ширина,
4 байта высота,
1 байт глубина цвета
1 байт цветовой тип
1 байт сжатие
1 байт фильтр
1 байт чересстрочность
Чтобы собрать PNG альфа-канал, нужно действовать по пунктам
0. Написать сигнатуру PNG (читать в спецификации PNG).
1. Собрать данные IHDR следующим образом: перенести байты ширины и высота, цветовой тип назначить как ноль (0), а все остальное перенести с JHDR байтов, отвечающий за альфа-канал соответственно с PNG байтами.
2. Перенести все IDAT чанки.
3. Записать IEND чанк.
Что альфа-канал, что основной поток, можно действовать по одному принципу: «склеить» содержимое всех чанков поочередно (не сами чанки, а их данные).
Это нужно для того, чтобы браузер мог прочитать данные как PNG и JPEG
В этой статье я не дам описание, как это сделать. Будет время — напишу в следующий раз
www.libpng.org/pub/mng/spec/jng.html [1] — JNG
www.w3.org/TR/PNG/ [2] — PNG
139 74 78 71 13 10 26 10 - JNG
137 80 78 71 13 10 26 10 - PNG
Сигнатуры в десятичной системе счислений.
Я раньше экспериментировал на JavaScript. Сейчас у меня нету ни копий, ни самой работы и результатов экспериментов. Единственное что я могу сказать — работало отлично при всех JNG изображениях. Все зависит от того, как разрабатывать.
1. Использовать XHR2, причем советую выбирать responseType как «arraybuffer».
2. Вместо кодирования в Base64 советую использовать объект Blob и функцию URL.createObjectURL к объекту Blob.
3. Не пренебрегать типизированными массивами, а также DataView API.
4. FileReader лучше использовать только при приеме с формы (input).
5. Ну и конечно же больше работать над файлами.
Из Википедии: «Циклический избыточный код (англ. Cyclic redundancy code, CRC[1]) — алгоритм вычисления контрольной суммы, предназначенный для проверки целостности передаваемых данных. Алгоритм CRC обнаруживает все одиночные ошибки, двойные ошибки и ошибки в нечетном числе битов.»
Можете прочитать здесь [3].
Мы детально рассмотрели формат JNG. Мы рассказали, как разобрать его на файлы, а также познакомились получили некоторые знания о программировании.
Я буду дальше работать над темой изображений, в том числе про JNG.
Автор: Alexei03a
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/obrabotka-izobrazhenij/14796
Ссылки в тексте:
[1] www.libpng.org/pub/mng/spec/jng.html: http://www.libpng.org/pub/mng/spec/jng.html
[2] www.w3.org/TR/PNG/: http://www.w3.org/TR/PNG/
[3] здесь: http://ru.wikipedia.org/wiki/%D0%A6%D0%B8%D0%BA%D0%BB%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%B8%D0%B7%D0%B1%D1%8B%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%B4
Нажмите здесь для печати.