Интеграция конвертации HEIC, превью и кроппера на фронтенд (Сайт объявлений

Чистая фронтенд-задача: heic2any для конвертации, Cropper.js для кадрирования, превью-галерея и лоадер на время обработки. Всё внедряется в .tpl/.php шаблон формы без касания бэкенда — на выходе бэкенд получает готовый JPG через существующий upload-скрипт.

Сделаю за 2–3 дня, 30 USD.

Шаблон формы загрузки на jQuery или Vanilla JS?

Здравствуйте!
Буду рад сотрудничеству с вами.
Мой опыт разработки веб-приложений JavaScript Vanilla JS / jQuery более 15 лет.
Портфолио: Freelancehunt

Здравствуйте! Я внимательно прочитал бриф, и объем работы хорошо определен. Это чисто фронтенд задача — никаких изменений на бэкенде, никакой работы с базой данных, никаких знаний о движке Tamaranga не требуется. Просто чистый JavaScript, внедренный в правильный файл шаблона. Позвольте мне объяснить, как я это реализую.
Технический подход
Шаг 1 — Найти шаблон загрузки
Сначала я определю правильный файл .tpl или .php, обрабатывающий форму подачи/редактирования объявления — в частности, элемент ввода файла для загрузки фотографий. Это единственная точка интеграции для всей функциональности ниже.
Шаг 2 — Конвертация HEIC в JPG
Используя библиотеку heic2any, загруженную через CDN — без инструментов сборки, без зависимостей, просто вставляется в любой шаблон. Когда пользователь выбирает файлы .heic или .heif, конвертация запускается автоматически при событии изменения, прежде чем произойдет что-либо другое. Вся конвертация происходит на стороне клиента — сервер никогда не видит файл HEIC.
Шаг 3 — Индикатор загрузки
Чистый визуальный индикатор появляется в момент начала конвертации и исчезает, когда она завершена. Простой CSS спиннер или наложение прогресса — оформленный в соответствии с вашей существующей темой. Для нескольких файлов каждый файл показывает свой собственный статус конвертации, чтобы пользователь точно знал, что обрабатывается.
Шаг 4 — Галерея предварительного просмотра
… После конвертации (или для стандартных файлов JPG/PNG) миниатюры отображаются в сетке предварительного просмотра под элементом ввода файла. Каждая миниатюра показывает:
Предварительный просмотр изображения
Имя файла и размер
Кнопку удаления для отмены выбора перед загрузкой
Кнопку обрезки для открытия обрезчика для этого конкретного изображения
Шаг 5 — Интеграция Cropper.js
Нажатие на обрезку на любой миниатюре предварительного просмотра открывает модальное окно с инициализированным Cropper.js на этом изображении. Пользователь может:
Перетаскивать для изменения положения
Изменять размер области обрезки
Подтвердить обрезку → обрезанная версия заменяет оригинал в предварительном просмотре
Результат
Один хорошо прокомментированный файл JavaScript (и минимальный CSS для индикатора загрузки и модального окна), который вы вставляете в свою тему. Инструкции по реализации включены, чтобы ваша команда точно знала, в какую строку шаблона добавить ссылку на скрипт. Код будет написан на чистом JS — без зависимостей от фреймворков, совместим с шаблонами на основе jQuery без конфликтов.
Один вопрос перед началом:
Использует ли ваша тема Tamaranga jQuery или чистый Vanilla JS? Это определяет, буду ли я использовать $.ajax от jQuery для отправки формы или нативный Fetch API — оба работают, просто хочу соответствовать тому, что уже есть в шаблоне, чтобы избежать конфликтов библиотек.

Показать оригинал

Перевести