Быстрое превью сложных PDF-файлов

С самого начала создания вебгенераторов я ставил цель — отображать только настоящее превью PDF-файла.

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

Я уже писал в 2020-м году на эту тему — создание растрового превью. И с тех пор ничего не поменялось: на странице отображается растровый файл PNG из страниц PDF-файла, который может быть прозрачным.

Но время шло. Движок развивался и макеты, которые можно с помощью него делать, становились сложнее.

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

Для ускорения превью движок научился рендерить PDF по слоям, то есть обновляется только один из слоёв. Причем движок сам склеивает потом разные слои в итоговый PDF, когда мы нажмём «Сохранить» или «Скачать».

Теперь можно загрузить карту в PDF-файле и она срендерится в этот момент в слой. А потом вы заполняете текст и в превью независимо от карты обновляется слой с текстами. Ну магия же!

Но всё равно превращение PDF в растр — самый «долгий» этап. Особенно это стало заметно в созданных нами дизайн-системах хранения данных и макетов.

И тут изобрёл превью следующего поколения — превью в канвас минуя PDF.

«Но как тогда сохранить объективность превью?» — спросите вы, — «Ведь главная задача как раз делать из PDF!»

А всё просто!

Почему превью минуя PDF не были объективными? А потому что тексты рендерятся по-другому: позиция кегельной площадки, кернинг, лигатуры, интерлиньяж и прочие кастомные фичи. Но так как я в любом случае рисую текст кривыми Безье, так почему я не могу сразу рисовать векторы в канвасе? Могу! И начал рисовать.

Ну как «и начал». Пришлось перелопатить этапы конвертации текстов в вектор «раньше», чтобы «выйти» из движка до создания PDF.

Как обычно изобретение привело к побочным изобретениям. «Быстрое превью» (пока мы его называем так) минует PDF, а значит мы можем в шаблон указать RGB-цвет и получим яркий RGB-растр. А тут и генератор растровых файлов в CMYK/RGB получился.

В общем, теперь это не «Генератор PDF», а «Генератор графики». Йоу!

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