Объединить картинки в один PDF
В чём на самом деле проблема
Требование «пришлите одним PDF» почти никогда не про формат как таковой. Принимающей стороне нужен один объект, который нельзя перепутать, потерять по дороге и переставить местами: страницы договора идут в известном порядке, чеки к авансовому отчёту пронумерованы, разворот паспорта лежит рядом с пропиской. Три отдельных JPG этого не дают, поэтому форма загрузки их и не принимает.
Дальше начинается то, чего в требовании не написано. Снимок с телефона — это кадр 3000×4000 пикселей и четыре-шесть мегабайт. Диалог выбора файлов отдаёт их не в том порядке, в каком вы снимали. Вертикальный кадр не совпадает по пропорциям с листом A4. И каждая из этих трёх мелочей всплывает уже после того, как документ отправлен.
Ниже — как собрать такой документ в браузере и что именно проверить перед отправкой.
Сборка: три плитки и одна кнопка
Страница «Изображения в PDF» выглядит как три плитки: Добавить файлы, Настройки и Собрать PDF. Сразу оговорка, которая экономит время: плитка «Настройки» на этой странице ничего не открывает. Параметры листа зашиты в код, менять их через интерфейс нельзя — что именно зашито, разберём в следующем разделе.
- Нажмите плитку Добавить файлы. Откроется окно с заголовком
FILE_INPUTи ссылкой Select Images — она вызывает системный диалог выбора. Поле принимает несколько файлов сразу и фильтрует их маскойimage/*, то есть любой растр, который умеет открыть браузер: JPG, PNG, WebP, снимки прямо из галереи телефона. - Посмотрите на список под ссылкой и на строку Total files — там стоит число выбранных файлов. Это единственная проверка перед сборкой: превью страниц на странице нет.
- Убедитесь, что порядок в списке тот, что нужен. Страницы лягут в документ ровно в этой последовательности.
- Закройте окно крестиком
[X]и нажмите плитку Собрать PDF. В окнеEXPORT_PROCESSORпод вопросом «Ready to generate?» лежит кнопка Generate PDF. - Нажмите её. Пока идёт сборка, надпись на кнопке меняется на Generating…, а когда возвращается прежняя — браузер уже предложил сохранить готовый файл.
Всё считает библиотека jsPDF, подключённая к странице; байты картинок читаются локально через FileReader и никуда не отправляются. Это не маркетинговая формулировка, а следствие устройства страницы: сетевого запроса с содержимым файла в коде просто нет.
Что зашито в геометрию страницы
Документ создаётся с параметрами jsPDF по умолчанию: книжная ориентация, формат A4, единицы — миллиметры. Лист получается 210×297 мм. Картинка кладётся с отступом 10 мм от левого и верхнего края, ширина жёстко задана в 190 мм, а высота вычисляется пропорционально.
Из этой арифметики следуют два практических вывода.
Первый: кадр с обычной камеры телефона в пропорции 3:4 растянется на 190 мм ширины и 253 мм высоты. Вместе с верхним отступом это 263 мм — в лист укладывается, снизу остаётся поле примерно на три сантиметра. Такой скан выглядит нормально.
Второй: вертикальный кадр 9:16 — а это стандартный скриншот телефона — даст высоту около 337 мм. Лист 297 мм, и нижняя часть скриншота на страницу физически не попадёт. Обрезка происходит молча, без предупреждения. Если вы отправляете скриншоты переписки или чек длинной лентой, обрежьте изображение до пропорций, близких к A4, или разбейте его на два кадра до сборки.
Горизонтальный кадр 4:3 займёт 142 мм по высоте и оставит внизу половину листа пустой. Это не ошибка, просто ширина фиксирована, и подгонки по высоте в коде нет.
Порядок страниц и повторный выбор
Каждое изображение занимает отдельную страницу, новая страница добавляется перед каждым следующим файлом. Порядок — тот, в каком файлы пришли из диалога, а диалог почти всегда сортирует по имени как по строке. Поэтому Фото 10.jpg встаёт выше Фото 9.jpg: сравниваются символы, а не числа. Лечится переименованием с ведущим нулём — 01, 02, 03, тогда строковая сортировка совпадает с числовой.
Отдельно про повторный выбор: второй заход через Select Images не дописывает файлы в конец списка, а заменяет список целиком. Если вы выбрали три скана, потом вспомнили про четвёртый и выбрали только его, в документе окажется одна страница. Выбирайте все нужные файлы за один раз, зажав Ctrl или Shift в диалоге.
Убрать один файл из списка или перетащить его выше в интерфейсе нельзя — переставлять придётся именами в папке и выбирать заново.
Вес готового файла
Изображения попадают в документ практически как есть, без пережатия. Семь снимков по 5 МБ дадут PDF около тридцати мегабайт, и форма загрузки с лимитом в 10 МБ его не примет. Инструмент сборки такой лимит не проверяет и не сообщает о нём.
Правильный порядок действий — уменьшить кадры до сборки. Прогоните их через сжатие изображений: впишите вес в поле «Цель, KB» и ограничьте длинную сторону через «Макс. ширина». Для документа, который будут читать глазами, 1600–2000 пикселей по длинной стороне хватает с запасом; текст остаётся разборчивым, а вес падает в разы. Уменьшение числа пикселей экономит байты мягче, чем выкручивание качества вниз: на низком качестве вокруг букв появляются ореолы, и скан становится хуже читаемым.
Чего инструмент не делает
Текстового слоя в результате нет. Внутри PDF лежит картинка, поэтому поиск по словам, выделение текста мышью и копирование абзаца работать не будут. Распознавания эта страница не выполняет — если от вас требуют «PDF с текстовым слоем» или машиночитаемый документ, задачу решает не сборщик картинок, а программа с OCR.
Автоповорота по EXIF тоже нет. Телефон часто пишет ориентацию тегом, а не разворачивает пиксели; сборщик берёт пиксели. Кадр, который в галерее выглядит правильно, может лечь на страницу боком. Разверните фотографию в системном просмотрщике и пересохраните, чтобы поворот записался в сами пиксели.
Имя выходного файла фиксировано и не зависит от содержимого — переименуйте документ после сохранения, если принимающая сторона просит осмысленное название вроде dogovor-2026.pdf.
Обратная задача — вытащить страницы уже готового документа обратно в картинки — решается на странице PDF в JPG, где можно выбрать разрешение и указать диапазон страниц. Остальные инструменты этой группы собраны в разделе PDF.
Короткий чек-лист перед отправкой
- Файлы переименованы с ведущим нулём, порядок в списке совпадает с нужным.
- Все файлы выбраны за один заход, число в строке Total files сходится.
- Тяжёлые снимки заранее уменьшены под лимит формы.
- Скриншоты в пропорции 9:16 обрезаны или разбиты на два кадра.
- Готовый PDF открыт просмотрщиком и пролистан до последней страницы.
Последний пункт важнее остальных: обрезанный низ страницы и перепутанный порядок видно за пять секунд, а переподача документа стоит недели.
В каком порядке страницы окажутся в документе?
В том, в каком файлы попали в список при выборе, — сортировка идёт по имени как по строке, а не по дате съёмки. Из-за этого «Фото 10» оказывается выше «Фото 9». Переименуйте снимки с ведущим нулём (01, 02, 03) и выберите их заново, тогда порядок совпадёт с ожидаемым. Проверить его можно только в готовом файле: превью страниц на странице нет.
Почему у скриншота обрезался низ?
Ширина картинки на листе задана жёстко — 190 мм при формате A4, — а высота считается пропорционально. Вертикальный кадр 9:16 при такой ширине требует около 337 мм высоты, тогда как лист даёт 297 мм. Всё, что не поместилось, в документ не попадает, и предупреждения об этом нет. Обрежьте скриншот до пропорций поближе к A4 или разделите его на две части до сборки.
Можно ли будет искать текст внутри такого PDF?
Нет. Страница представляет собой картинку в PDF-обёртке, распознавания текста здесь не происходит. Поиск по словам и выделение мышью работать не будут. Если требование звучит как «PDF с текстовым слоем», нужен инструмент с OCR — сборка изображений эту задачу не закрывает.
Как уменьшить вес готового документа?
Только заранее, до сборки: пережатия внутри нет, картинки укладываются в документ почти как есть. Уменьшите исходники сжатием изображений — задайте целевой вес в килобайтах и ограничьте длинную сторону 1600–2000 пикселями. Для десяти листов это разница между тридцатью мегабайтами и тремя.
Файлы уходят на сервер?
Нет. Картинки читаются из вашей файловой системы средствами браузера и собираются в документ библиотекой jsPDF прямо во вкладке. Запроса, который отправлял бы содержимое файлов наружу, в коде страницы нет — это видно во вкладке Network в инструментах разработчика. Поэтому через страницу можно пропускать паспорта и справки.