Приложение для обработки изображений с возможностью конвертации в PDF и ZIP, редактирования и управления файлами.
Главный HTML-файл приложения. Содержит:
Основной JavaScript-код приложения. Содержит:
Стили приложения. Содержит:
Позволяет перетаскивать файлы в выделенную область. Поддерживаются изображения (JPG, PNG, GIF, WEBP, SVG) и PDF-файлы.
Реализация: Обработчики событий dragover, dragleave и drop в script.js
Клик по области загрузки открывает стандартный диалог выбора файлов.
Реализация: Скрытый input type="file" в HTML и обработчик события change в JavaScript
Загруженные изображения отображаются в виде миниатюр с возможностью выбора, удаления и просмотра.
Реализация: Функция renderImages() в script.js и соответствующие стили
Изображения можно перетаскивать для изменения их порядка с помощью библиотеки SortableJS.
Реализация: Функция setupSortable() в script.js
Клик по миниатюре открывает модальное окно с изображением в полном размере.
Реализация: Функции openModal(), closeImageModal() и связанные обработчики
В режиме редактирования доступна обрезка изображений с помощью библиотеки Cropper.js.
Реализация: Функции openEditModal(), cropImage() и инициализация Cropper
Возможность конвертировать изображения между форматами JPG, PNG и WEBP.
Реализация: Функция convertImage() с использованием canvas.toBlob()
В модальном окне просмотра можно переключаться между изображениями с помощью кнопок или клавиш клавиатуры.
Реализация: Функции showPrevImage(), showNextImage() и обработчик клавиатуры
Создание PDF-документа из изображений с помощью библиотеки jsPDF.
Реализация: Функции downloadAsPdf() и addImageToPdf()
Создание ZIP-архива с изображениями с помощью библиотеки JSZip.
Реализация: Функции downloadAsZip() и addImageToZip()
Слайдер для установки ширины выходных изображений при экспорте.
Реализация: Обработчик input для imageWidthSlider
Поле для ввода имени файла при экспорте.
Реализация: Поле filenameInput и его использование в функциях экспорта
PDF-файлы конвертируются в набор изображений (по одному на страницу) с помощью PDF.js.
Реализация: Функция processPdfFile() с использованием PDF.js
Модальное окно с настройками качества и масштаба перед конвертацией PDF.
Реализация: Функции showPdfSettingsModal(), updatePreviewQuality() и связанные обработчики
Отображение прогресса конвертации PDF с возможностью отмены.
Реализация: Функции showProgress(), updateProgress() и элементы интерфейса
Переключение между темами с сохранением состояния.
Реализация: Функция toggleTheme() и CSS-переменные в styles.css
Разворачивающиеся секции с инструкцией, информацией о конфиденциальности и используемых библиотеках.
Реализация: Функция setupAccordion() и соответствующие стили
Интерфейс адаптируется под разные размеры экранов с помощью медиа-запросов.
Реализация: Медиа-запросы в styles.css
Кнопки активируются/деактивируются в зависимости от состояния приложения.
Реализация: Функция updateUIState() и обработчики событий
Возможность выбрать несколько изображений для массовых операций.
Реализация: Коллекция selectedImages и чекбоксы в интерфейсе
Удаление всех выбранных изображений одной кнопкой.
Реализация: Функция deleteSelected()
Массовое переименование файлов по шаблону.
Реализация: Функция renameFiles()
Удаление всех загруженных файлов и сброс состояния.
Реализация: Функция clearAll()