Вставить картинку в PDF — Добавить фото или логотип

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

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

Загрузите PDF или фото на pdfredx.com, откройте нужную страницу в редакторе (FAB) и включите инструмент 🖼️ «Вставить». Откроется выбор файла — укажите PNG, JPG или логотип. Изображение читается локально через FileReader, на сервер ничего не уходит.

Картинка появляется по центру страницы, масштабированная примерно до 60% ширины, — сразу видно и удобно двигать.

Шаг 02. Разместить, повернуть и наклонить

Вставленное изображение — это объект с обычными ручками: тяните за углы, чтобы менять размер, за верхнюю ручку — чтобы вращать, за середину — чтобы двигать. Внизу открывается панель #FAB_INSERT_PANEL с дополнительными настройками:

• Слайдеры наклона (skewX / skewY) — скашивают изображение по горизонтали и вертикали в градусах. Так печать или фото «ложится» под углом страницы, имитируя наклон.
• Зеркало H / V — отражает картинку по горизонтали или вертикали (⇄ / ⇅).
• 🗑 Удалить — убирает вставленное изображение.
• ✓ Ок — фиксирует и снимает выделение.

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

Шаг 03. Сохранить

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

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

Вставка идёт через Fabric.js. fabInsertImageFromFile читает файл в dataURL и создаёт fabric.Image: изображение масштабируется до 60% холста и центрируется. Оно становится полноценным объектом на холсте — с ним работают штатные ручки Fabric (перемещение, масштаб, поворот).

Наклон задаётся свойствами skewX / skewY объекта: слайдеры вызывают obj.set('skewX', …) и перерисовывают холст. Зеркало переключает flipX / flipY. При сохранении saveFab запекает всё в изображение страницы в нативном разрешении, так что вставка не мылится.

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

Наклон — это скос (shear), а не полная перспектива. Слайдеры скашивают изображение по осям — этого хватает, чтобы «подложить» печать под наклон страницы. Но это не 4-точечная коррекция перспективы: параллельные края остаются параллельными, эффект «трапеции» (когда дальний край уже ближнего) не воспроизводится.

Результат растровый. Вставка запекается в изображение страницы; отдельным слоем в готовом PDF её уже не подвинуть.

Правка постранично. Изображение вставляется на одну открытую страницу за раз.

Хотите не просто вставить, а нанести полупрозрачную метку на все страницы? Это инструмент Водяной знак. А закрыть документ паролем — Защитить PDF.

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

Договор нужно завизировать: поставить скан печати организации, вклеить подпись, добавить логотип на бланк. Чаще всего это делают из PNG с прозрачным фоном — печать или подпись, снятые заранее. Проблема в том, что обычный онлайн-сервис для вставки картинки в PDF просит загрузить сам договор на свой сервер. То есть документ с реквизитами, суммами и подписями уезжает на чужую машину ради наложения одной картинки. Разберём, как сделать это локально и почему это важно.

Почему это чувствительная операция

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

Отдельно стоит помнить: сам файл прозрачной печати (PNG факсимиле) тоже не стоит раздавать по чужим серверам — это ваш многоразовый «оттиск».

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

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

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

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

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

Файлы читаются локально. И страница PDF, и картинка печати открываются во вкладке через FileReader. Сетевого запроса с ними нет.

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

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

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

Практично: откройте нужную страницу, вставьте PNG печати или подписи, слайдерами наклона подгоните её под угол листа, поставьте на место и сохраните. И договор, и файл печати всё это время остаются у вас.

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

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

Юридическая сила. Наложенная картинка печати или подписи — это визуальный оттиск, а не квалифицированная электронная подпись (КЭП). Для юридически значимого подписания используйте сертифицированные средства ЭП; вставка изображения удобна для внутренних, служебных и согласовательных документов.

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

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

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

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

Наложите печать или подпись без загрузки договора на сервер — pdfredx.com, бесплатно, без регистрации.

«Положить» картинку на страницу PDF под углом можно по-разному. Полноценная перспектива — это проективное преобразование (гомография, матрица 3×3), которое воспроизводит трапецию: дальний край объекта визуально уже ближнего. Более простой и предсказуемый путь — аффинный скос (shear): наклон по осям без искажения глубины. pdfredX идёт вторым путём. Разберём, как устроен инструмент вставки изображения (insert) в FAB-редакторе: почему fabric.Image со skewX/skewY, чем скос отличается от истинной перспективы и как результат запекается в страницу.

Архитектурный выбор: аффинный скос против проективной гомографии

Истинная перспектива (гомография). Проективное преобразование задаётся матрицей 3×3 и требует деления на однородную координату — так рендерят наклон плоскости в 3D (CSS matrix3d, WebGL). Оно даёт эффект трапеции, но сложнее в реализации и в UI (нужны 4 угловые точки).

Аффинный скос (путь pdfredX). Fabric.js предоставляет skewX / skewY — сдвиг по осям. Это аффинное преобразование: параллельные края остаются параллельными, трапеции нет, но объект убедительно «наклоняется» под угол страницы. Плюсы — предсказуемость, простое управление двумя слайдерами и штатными ручками Fabric, и всё это поверх уже растрового пайплайна редактора. Для типовой задачи (подложить печать/фото под наклон листа) скоса достаточно.

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

Загрузка и размещение

function fabInsertImageFromFile(file) {
  const reader = new FileReader();
  reader.onload = ev => {
    fabric.Image.fromURL(ev.target.result, img => {
      const scale = Math.min(maxW / img.width, maxH / img.height, 1); // до 60% холста
      img.set({ left: posX, top: posY, scaleX: scale, scaleY: scale, selectable: true });
      img.isInserted = true;
      fabPushUndo();
      fabCanvas.add(img);
      fabCanvas.setActiveObject(img);
      fabShowInsertPanel(img);
    });
  };
  reader.readAsDataURL(file);
}

Изображение читается локально в dataURL и становится обычным объектом fabric.Image — центрированным, масштабированным до 60% холста. Флаг isInserted помечает его как вставку. Дальше работают штатные контролы Fabric: перемещение, масштаб за углы, поворот за верхнюю ручку.

Наклон: skewX / skewY

Панель #FAB_INSERT_PANEL даёт два слайдера, каждый выставляет свойство скоса объекта:

function fabSetSkewX(val) {
  const obj = fabCanvas.getActiveObject();
  obj.set('skewX', val);   // аффинный сдвиг по X (в градусах)
  fabCanvas.renderAll();
}
// fabSetSkewY — аналогично для оси Y

Именно здесь проходит граница подхода: skewX/skewY — это сдвиг, а не проекция. Он наклоняет прямоугольник в параллелограмм, но не в трапецию. Для «подложить под угол» этого хватает; для коррекции истинной перспективы (выпрямить сфотографированный под углом лист) — нет.

Зеркало, удаление, фиксация

function fabInsertFlip(axis) {
  const obj = fabCanvas.getActiveObject();
  obj.set(axis === 'x' ? 'flipX' : 'flipY', !obj[axis === 'x' ? 'flipX' : 'flipY']);
  fabCanvas.renderAll(); fabPushUndo();
}

Зеркало переключает flipX/flipY, «Удалить» снимает объект с холста, «Ок» (fabInsertClose) фиксирует и убирает выделение. Каждое деструктивное действие проходит через fabPushUndo(), поэтому вставку можно отменить (Ctrl+Z).

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

При сохранении saveFab экспортирует холст в изображение с множителем нативного разрешения:

const multiplier = fabNativeW / fabCanvas.getWidth();
const dataUrl = fabCanvas.toDataURL({ format:'jpeg', quality:0.92, multiplier });
items[fabItemId].editUrl = dataUrl;

Вставленное изображение сливается со страницей в единый растр в полном разрешении, поэтому на экспорте оно не мылится. Как и у других инструментов, origUrl не мутируется — правки идут только в editUrl.

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

Скос ≠ перспектива. Нет эффекта трапеции; выпрямить сильно заваленный кадр или наложить текстуру строго по 4 углам этим инструментом нельзя.

Растровый результат. После сохранения вставка — часть изображения страницы; отдельным слоем её уже не подвинуть (для этого переоткрывайте FAB, пока не применили Cropper).

Одна страница за раз. Инструмент работает с открытой в редакторе страницей.

Что дальше

Истинная 4-точечная перспектива — проективный варп через matrix3d/WebGL с тянущимися угловыми ручками, чтобы выпрямлять сфотографированные под углом листы и класть текстуру точно по углам.

Библиотека штампов — сохранять часто используемые PNG (печать, подпись) для быстрой повторной вставки без выбора файла.

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