Аннотации в PDF — Рисование и заметки онлайн

Нужно написать замечание на полях договора, обвести пункт, выделить абзац маркером или вписать данные в бланк. Инструмент «Аннотации» в pdfredX даёт рисовать и писать прямо поверх PDF-страницы в браузере: текст, фигуры, стрелки, перо, маркер — всё наносится на лист и запекается в готовый файл. Ничего не загружается на сервер.

Шаг 01. Открыть страницу в редакторе

Загрузите PDF на pdfredx.com и откройте нужную страницу в редакторе (FAB) — например, кнопкой ✏️ на карточке. Страница рендерится во вкладке через PDF.js, разметка ложится поверх неё. На сервер ничего не уходит.

Шаг 02. Выбрать инструмент разметки

В панели редактора — полный набор для аннотаций:

• ✏️ Текст — кликните и печатайте: так добавляют текст в PDF, подписи к полям, вписывают данные в бланк. Цвет и размер настраиваются.
• 🖊️ Перо — свободное рисование от руки; толщину линии можно менять. Это способ «рисовать на PDF» как на бумаге.
• 🖍️ Маркер — жёлтое полупрозрачное выделение важных строк.
• Фигуры — прямоугольник, круг, эллипс, треугольник (залить или контур).
• Линии — прямая линия и ломаная (стрелки, указатели).

Ошиблись — Ctrl+Z отменяет последнее действие; ESC или правый клик сбрасывают текущее рисование, не выключая инструмент.

Шаг 03. Сохранить PDF с пометками

Нажмите «Сохранить» — все отметки запекаются в страницу в полном разрешении, в галерее виден результат. Затем «Создать PDF» соберёт файл: получаете PDF с добавленным текстом и пометками. Скачивание идёт напрямую из браузера. Бесплатно, без регистрации, без серверной очереди.

Как это работает технически

Разметка рисуется через Fabric.js поверх изображения страницы. Каждый инструмент создаёт объект на холсте (текст — fabric.IText, перо — свободный путь, фигуры — fabric.Rect/Circle и т.д.). При сохранении saveFab экспортирует холст с объектами в изображение страницы в нативном разрешении и обновляет editUrl. Оригинал (origUrl) не меняется — правки идут только в editUrl, поэтому редактор можно переоткрыть и продолжить.

Известные ограничения

Аннотации запекаются в страницу. В готовом PDF пометки — часть изображения листа, а не отдельный редактируемый слой: их не подвинуть и не удалить как объект в другом просмотрщике. Пока не нажали «Сохранить», всё остаётся редактируемым в FAB.

Заполнение бланков — визуальное. Текст вписывается поверх поля как аннотация; это не интерактивные AcroForm-поля PDF, а наложенный текст (для печати и отправки скана — то, что нужно).

Результат растровый. Текст самого документа в экспортированном файле не выделяется — страница становится изображением с вашими пометками.

Нужно безвозвратно скрыть данные, а не пометить? Это инструмент Замазать текст. А нанести метку на все страницы разом — Водяной знак.

Попробуйте прямо сейчас — pdfredx.com, без регистрации, файлы остаются у вас.

Разметить договор перед отправкой, оставить комментарии по макету, вписать замечания в отчёт — типовая совместная работа с документами. Но обычный онлайн-редактор PDF для рисования и комментариев просит сначала загрузить документ на свой сервер. То есть договор с условиями и данными уезжает на чужую машину ради пары пометок. Разберём, как аннотировать PDF онлайн, не отдавая файл никуда.

Куда уходит документ на серверных редакторах

Когда вы открываете PDF в обычном онлайн-редакторе разметки, файл целиком уходит на удалённую машину. Дальше — по политике сервиса, которую мало кто читает:

• документ сохраняется во временном хранилище подрядчика (AWS, GCP, Azure);
• обрабатывается на чужом сервере;
• хранится от нескольких часов до нескольких суток «для надёжности»;
• логируется вместе с метаданными — IP, время, имя и размер файла.

Для совместной проверки это особенно обидно: вы всего лишь ставите комментарии и стрелки — операция чисто визуальная, — а платой становится полный доступ постороннего сервиса к содержимому договора.

Локальное аннотирование: документ не покидает вкладку

pdfredX — это редактор PDF для рисования и комментариев, который не загружает файл никуда. Это следствие архитектуры, которое можно проверить.

Файл читается локально. PDF.js открывает документ во вкладке и рисует страницу на Canvas. Сетевого запроса с вашим файлом нет.

Разметка идёт в памяти вкладки. Текст, перо, маркер, фигуры, стрелки — всё это объекты поверх страницы, операции над уже загруженными данными. Ничего не отправляется.

Готовый файл собирается на клиенте. PDF с аннотациями формируется прямо во вкладке и падает в «Загрузки», а не летает на сервер и обратно.

Работает офлайн. Загрузите договор, отключите интернет и разметьте его — всё продолжит работать. Сеть нужна только чтобы один раз загрузить приложение.

Практично: откройте страницу, выберите текст/перо/маркер, вставьте комментарий или обведите пункт и сохраните. Документ всё это время остаётся у вас — удобно и для чувствительных договоров, и для внутренней проверки макетов.

Что мы гарантировать не можем — честный дисклеймер

Клиентская обработка защищает документ от ухода на внешние серверы, но это не щит от всех угроз, и обещать обратное было бы нечестно.

Вредоносное ПО или кейлоггер на устройстве. Если машина скомпрометирована, программа может читать файлы с диска в обход браузера.

Браузерные расширения с широкими правами. Расширение с доступом «читать данные на всех сайтах» теоретически видит содержимое вкладки. Для чувствительных документов работайте в профиле без сторонних расширений или в приватном окне.

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

Мы обеспечиваем изоляцию на уровне браузерной вкладки. Остальное — на стороне пользователя.

Разметьте и прокомментируйте PDF без загрузки на сервер — pdfredx.com, бесплатно, без регистрации.

Аннотировать PDF можно двумя принципиально разными способами. Нативный путь — добавить объекты в структуру PDF как отдельный слой аннотаций (спецификация Annotations: подчёркивания, заметки, фигуры остаются векторными и редактируемыми в любом просмотрщике). Растровый путь — нарисовать разметку на Canvas поверх изображения страницы и «впечатать» её. pdfredX идёт вторым путём. Разберём, как устроен инструмент annot: почему слой рисования Fabric.js вместо нативных аннотаций, как устроены инструменты и почему всё запекается в страницу.

Архитектурный выбор: нативные аннотации против Canvas-слоя

Нативные аннотации PDF. Записываются в структуру файла как отдельные объекты (/Annots): текст, выделения, фигуры остаются векторными и редактируемыми — их можно двигать и удалять в стороннем просмотрщике. Плюс — гибкость; минус для браузера без бэкенда — нужен полноценный парсер/писатель PDF, а поведение аннотаций между просмотрщиками разнится.

Canvas-слой (путь pdfredX). Инструмент встроен в FAB-редактор, где страница уже отрисована PDF.js в изображение. Разметка рисуется тем же Canvas 2D через Fabric.js поверх страницы и сливается с ней в единый растр. Плата — аннотации теряют «редактируемость» в чужих просмотрщиках; выигрыш — предсказуемый вид у всех (пометки видны везде одинаково, их нельзя случайно сдвинуть) и полная приватность (всё во вкладке).

Разбор реализации

Инструменты как объекты Fabric

Каждый инструмент разметки создаёт объект на холсте:

• Текст → fabric.IText (редактируемый блок, цвет/размер/выделение);
• Перо → свободный путь (freeDrawingBrush, толщина fabPenWidth);
• Маркер → полупрозрачный жёлтый штрих (opacity ~0.38);
• Фигуры → fabric.Rect / Circle / Ellipse / Triangle (заливка или контур по fabFillMode);
• Линии → прямая (fabric.Line, Shift = snap по углам) и ломаная (полилайн, точки кликами).

Переключение инструмента (setFabTool) задаёт курсор и режим рисования; каждое деструктивное действие проходит через fabPushUndo() — глубина стека 30, откат по Ctrl+Z.

Отмена без выхода из инструмента

ESC и правый клик вызывают отмену текущего действия, но не выключают инструмент — можно сразу рисовать заново в нужном месте. Это сделано осознанно (частая правка): холст создан с fireRightClick:true + stopContextMenu:true, и правый клик шлёт mouse:down с button===2 → fabCancelCurrentActionOnly().

Запекание в страницу

При сохранении saveFab сначала убирает служебные объекты выделения (пунктир лассо/оверлеи), затем экспортирует холст в изображение с множителем нативного разрешения:

fabRemoveSelectionHelpers();               // убрать временные пунктиры/оверлеи
const multiplier = fabNativeW / fabCanvas.getWidth();
const dataUrl = fabCanvas.toDataURL({ format:'jpeg', quality:0.92, multiplier });
items[fabItemId].editUrl = dataUrl;         // правки — только в editUrl

Аннотации сливаются со страницей в полном разрешении, поэтому линии и текст не мылятся. Дополнительно объекты сохраняются в fabJson — при повторном открытии редактора они «оживают» через enlivenObjects, так что разметку можно доредактировать (пока не применён Cropper, сбрасывающий fabJson).

Компромиссы и границы подхода

Аннотации не нативные. В готовом PDF это часть растра страницы, а не редактируемый слой /Annots; в другом просмотрщике их не подвинуть.

Заполнение бланков — наложение. Текст ложится поверх поля, а не в интерактивное AcroForm-поле; для печати и отправки скана этого достаточно.

Растровый результат. Текст самого документа после экспорта не выделяется.

Что дальше

Экспорт в нативный слой аннотаций для чисто цифровых PDF — опциональная ветка, чтобы пометки оставались редактируемыми в стороннем просмотрщике, когда исходник это позволяет.

Липкие заметки (sticky notes) — сворачиваемые комментарии с автором и временем для совместной проверки.

Хотите проверить — откройте страницу в редакторе на pdfredx.com, порисуйте пером и текстом, сохраните. Без регистрации, без загрузки файла на сервер.