Integracja konwersji HEIC, podglądu i croppera na frontendzie (Strona ogłoszeń

Czyste zadanie frontendowe: heic2any do konwersji, Cropper.js do przycinania, podgląd galerii i loader na czas przetwarzania. Wszystko wdrażane w szablon .tpl/.php formularza bez dotykania backendu — na wyjściu backend otrzymuje gotowy JPG przez istniejący skrypt uploadu.

Zrobię w 2–3 dni, 30 USD.

Szablon formularza uploadu na jQuery czy Vanilla JS?

Pokaż oryginał

Przetłumacz

Cześć!\nBędę zadowolony z współpracy z Tobą.\nMam ponad 15-letnie doświadczenie w tworzeniu aplikacji internetowych w JavaScript Vanilla JS / jQuery.\nPortfolio: Freelancehunt

Pokaż oryginał

Przetłumacz

Cześć! Przeczytałem dokładnie brief i zakres jest dobrze zdefiniowany. To jest czysto zadanie frontendowe — żadnych zmian w backendzie, żadnej pracy z bazą danych, żadnej wiedzy o silniku Tamaranga wymaganej. Po prostu czysty JavaScript wstrzyknięty do odpowiedniego pliku szablonu. Pozwól, że przeprowadzę cię przez to, jak dokładnie to wdrożę.
Podejście techniczne
Krok 1 — Zlokalizowanie szablonu przesyłania
Najpierw zidentyfikuję odpowiedni plik szablonu .tpl lub .php obsługujący formularz przesyłania/edycji ogłoszenia — konkretnie element input pliku do przesyłania zdjęć. To jest jedyny punkt integracji dla wszystkich funkcji poniżej.
Krok 2 — Konwersja HEIC na JPG
Używając biblioteki heic2any załadowanej przez CDN — bez narzędzi do budowy, bez zależności, wprost do każdego szablonu. Gdy użytkownik wybiera pliki .heic lub .heif, konwersja uruchamia się automatycznie przy zdarzeniu zmiany, zanim cokolwiek innego się wydarzy. Wszystkie konwersje odbywają się po stronie klienta — serwer nigdy nie widzi pliku HEIC.
Krok 3 — Wskaźnik ładowania
Czysty wizualny wskaźnik ładowania pojawia się w momencie rozpoczęcia konwersji i znika, gdy jest zakończona. Prosty spinner CSS lub nakładka postępu — stylizowany, aby pasował do twojego istniejącego motywu. Dla wielu plików, każdy plik pokazuje swój własny status konwersji, aby użytkownik dokładnie wiedział, co jest przetwarzane.
Krok 4 — Galeria podglądów
… Po konwersji (lub dla standardowych plików JPG/PNG), miniaturki renderują się w siatce podglądu poniżej elementu input pliku. Każda miniaturka pokazuje:
Podgląd obrazu
Nazwa pliku i rozmiar
Przycisk usuwania, aby odznaczyć przed przesłaniem
Przycisk przycinania, aby otworzyć narzędzie do przycinania dla tego konkretnego obrazu
Krok 5 — Integracja Cropper.js
Kliknięcie przycisku przycinania na dowolnej miniaturce podglądu otwiera modal z zainicjowanym Cropper.js na tym obrazie. Użytkownik może:
Przeciągać, aby zmienić położenie
Zmień rozmiar obszaru przycinania
Potwierdzić przycinanie → przycięta wersja zastępuje oryginał w podglądzie
Wynik
Jeden dobrze skomentowany plik JavaScript (i minimalny CSS dla wskaźnika ładowania i modalu), który wrzucasz do swojego motywu. Instrukcje wdrożenia dołączone, aby twój zespół wiedział dokładnie, do którego wiersza szablonu dodać odniesienie do skryptu. Kod będzie napisany w Vanilla JS — bez zależności od frameworków, kompatybilny z szablonami opartymi na jQuery bez konfliktów.
Jedno pytanie przed rozpoczęciem:
Czy twój motyw Tamaranga używa jQuery czy czystego Vanilla JS? To decyduje, czy użyję $.ajax jQuery do przesyłania formularza, czy natywnego Fetch API — obie opcje działają, chcę tylko dopasować to, co już jest w szablonie, aby uniknąć konfliktów bibliotek.

Pokaż oryginał

Przetłumacz