Вырезать область из PDF — Умное Лассо

Прямоугольная обрезка годится не всегда: печать круглая, логотип фигурный, деталь на чертеже — сложной формы. Инструмент «Лассо» (Cutter) в pdfredX вырезает область любого контура — вы обводите объект кликами, а приложение отделяет его в отдельный слой, который можно двигать, зеркалить и сохранять. Всё в браузере, файл никуда не загружается.

Шаг 01. Загрузить документ

Откройте pdfredx.com и перетащите PDF или изображение в зону загрузки. Страница рендерится на Canvas локально через PDF.js — ни один байт не уходит на сервер. Нажмите 🖌 на карточке нужной страницы, чтобы открыть редактор.

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

В редакторе выберите 🔪 Вырезать (Лассо) — курсор сменится на прицел. Это не свободное рисование от руки, а построение полигона по точкам: так контур получается аккуратным, а не дрожащим.

Шаг 03. Обвести объект кликами

Кликайте по границе объекта точка за точкой — между кликами тянется «резиновая» линия, показывая будущую грань. Обходите контур как удобно: чем больше точек на изгибах, тем точнее вырез. Ошиблись — ESC или правый клик отменяет текущее построение, не выключая инструмент, и можно начать обводку заново.

Шаг 04. Замкнуть контур

Завершите обводку двойным кликом или кликом рядом с первой точкой (ближе ~22 px) — контур замкнётся, и область внутри полигона отделится в отдельный слой fabric.Image. Всё, что вне контура, в этот слой не попадает.

Шаг 05. Переместить и сохранить

Появится панель #FAB_CUTTER_PANEL: Зеркало H/V, Удалить, Ок. Перетащите вырезанный фрагмент на нужное место, при необходимости отразите. Нажмите Ок, затем 💾 Сохранить и «Создать PDF» — итоговый файл соберёт jsPDF и скачает напрямую из браузера. Бесплатно, без регистрации.

Как это реализовано технически

В основе — fabric.Polygon из Fabric.js 5.3.1. Каждый клик добавляет вершину, полигон перестраивается в реальном времени вместе с «резиновой» линией до курсора. При замыкании (fabCutterFinish) полигон превращается в clipPath — динамическую маску на элементе fabric.Image: видимой остаётся только область внутри контура, остальное отсекается. Экспорт вырезанного фрагмента идёт через Canvas API, без серверного рендера.

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

Точность — в количестве точек. На плавных кривых ставьте больше вершин: полигон соединяет соседние точки прямыми отрезками, поэтому на редких точках изгиб получится гранёным.

Резать лучше по контрасту. Чёткая граница объекта на фоне обводится легко; объект, сливающийся с фоном, придётся обводить внимательнее — автоматического распознавания края нет.

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

Если задача не вырезать объект, а убрать его и достроить фон на месте (чтобы не осталось и следа) — это инструмент Удалить объект из PDF.

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

Нужно достать из документа один элемент — печать, подпись, участок чертежа, кусок макета. Задача мелкая, но документ часто целый: договор, техническая документация, макет под NDA. И чтобы вырезать один фрагмент, обычный онлайн-сервис просит загрузить весь файл на свой сервер. Разберём, почему это лишний риск и как вырезать по контуру локально, в браузере.

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

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

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

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

Полная изоляция в браузере: как режет по контуру pdfredX

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

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

Вырез считается в памяти вкладки. Лассо строит полигон и применяет clipPath к изображению — всё это операции над пикселями уже загруженной страницы. Ничего не отправляется.

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

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

Пошагово, без отправки на сервер

01. Загрузите документ. Перетащите PDF в зону загрузки на pdfredx.com. FileReader читает файл локально — он не покидает устройство.

02. Обведите фрагмент. Нажмите 🖌 на странице, выберите 🔪 Вырезать, обведите объект кликами по контуру и замкните двойным кликом.

03. Сохраните и закройте. Перетащите вырезанное куда нужно, нажмите Ок → 💾 Сохранить → «Создать PDF». После закрытия вкладки данные файла исчезают из памяти.

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

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

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

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

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

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

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

Вырезать прямоугольник просто. Вырезать фигуру любого контура — печать, деталь чертежа, объект неправильной формы — уже интереснее: нужен полигон по точкам, «резиновая» линия за курсором, аккуратное замыкание и маска, отсекающая всё лишнее. Разберём, как устроен инструмент лассо (cutter) в pdfredX: fabric.Polygon + clipPath, целиком на клиенте, без серверного рендера.

Архитектурный вызов и выбор подхода

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

Почему clipPath, а не вырезание пикселей вручную. Можно было бы попиксельно занулять всё вне контура через getImageData. Но Fabric.js даёт готовый механизм: clipPath — маска, привязанная к объекту. Отрисовкой только внутренней области занимается движок, аппаратно-ускоренно, без ручных циклов по пикселям.

Почему на Canvas, а не над структурой PDF. Страница уже растеризована PDF.js в изображение. Мы работаем с пикселями через Canvas 2D и Fabric.js, без парсинга бинарной структуры PDF. И без сервера: файл не покидает вкладку.

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

Построение полигона по точкам

Каждый клик добавляет вершину в массив точек, полигон пересоздаётся, а до курсора тянется «резиновая» линия — предпросмотр следующей грани:

cutterPoints.push({ x, y });
// временный полигон-предпросмотр (пунктирный — служебный, не контент)
cutterPreview = new fabric.Polygon(cutterPoints, {
  fill: 'rgba(124,92,252,.12)',
  stroke: '#7c5cfc', strokeDashArray: [5, 4],
  selectable: false, evented: false,
});

Пунктирная обводка — признак служебного объекта: при сохранении такие объекты удаляются, чтобы пунктир не «впёкся» в результат.

Замыкание контура

Контур завершается двойным кликом или кликом рядом с первой точкой. Порог близости — примерно 22 пикселя:

const dx = x - cutterPoints[0].x, dy = y - cutterPoints[0].y;
if (Math.hypot(dx, dy) < 22) fabCutterFinish();

Порог в 22 px — баланс: меньше — трудно попасть в первую точку, больше — случайные замыкания на плотных контурах.

Отсечение через clipPath

При замыкании полигон превращается в маску изображения:

const clip = new fabric.Polygon(cutterPoints, { absolutePositioned: true });
const cut = new fabric.Image(sourceEl, { clipPath: clip });
fabCanvas.add(cut);

Видимой остаётся только область внутри полигона — остальное отсекается маской. Фрагмент становится отдельным объектом fabric.Image, который можно перетаскивать и зеркалить.

Грабля: синхронный рендер перед экспортом

Ключевой момент, на котором легко ошибиться. Перед тем как забрать пиксели вырезанного фрагмента через drawImage(lowerCanvasEl), нужно синхронно убрать пунктирный полилайн-предпросмотр и форсировать перерисовку:

fabCanvas.remove(cutterPreview);
fabCanvas.renderAll();              // синхронно, ДО drawImage
ctx.drawImage(fabCanvas.lowerCanvasEl, ...);

Без явного renderAll() Fabric перерисовывает холст асинхронно, к следующему кадру, — и служебный пунктир успевает попасть в вырезанный фрагмент (был баг: фиолетовый пунктир «чернилами» по краю выреза). Синхронный рендер гарантирует чистый результат.

Компромиссы и ограничения

Гранёность на кривых. Полигон соединяет вершины прямыми. На плавных дугах нужно больше точек, иначе контур получится ломаным. Это плата за простоту и предсказуемость против сплайнов.

Нет авто-детекта края. Инструмент режет строго по вашим точкам, а не по контрасту объекта. Границу, сливающуюся с фоном, придётся обводить внимательнее.

Растровый результат. Вырез — изображение с маской, а не вектор. Текстовый слой внутри после сохранения становится частью картинки.

Самопересечения. Контур со сложными самопересечениями Fabric закрашивает по правилу заполнения — результат может отличаться от ожидаемого. Для чистого выреза ведите контур без петель.

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