Obracanie i odbijanie obrazu za darmo

Jak to działa

Obracanie, odbijanie i korekta kąta działają tu w całości w przeglądarce, z użyciem HTML Canvas API — żaden plik nie jest wysyłany na serwer. Narzędzie rysuje obraz na niewidocznym płótnie z wybranym kątem i przekształceniami skali, a następnie koduje wynik do JPEG, PNG lub WebP własnym kodekiem przeglądarki.

1. 1
   Obraz dekodowany lokalnie

   Plik JPEG, PNG lub WebP jest wczytywany do HTMLImageElement przez lokalny adres obiektu — odwołanie do pamięci przeglądarki, które nigdy nie opuszcza urządzenia. Naturalne wymiary w pikselach są odczytywane bezpośrednio ze zdekodowanej bitmapy.
2. 2
   Zastosowanie przekształcenia Canvas

   Niewidoczne płótno ma rozmiar dopasowany do obróconego prostokąta ograniczającego (szerokość·cos + wysokość·sin dla każdej osi). Kontekst Canvas 2D jest następnie przesuwany do środka, obracany o wybrany kąt w radianach i skalowany przez -1 w osi poziomej lub pionowej przy odbiciach — wszystko to standardowe operacje ctx.rotate / ctx.scale bez zewnętrznej biblioteki.
3. 3
   Automatyczne kadrowanie narożników (opcjonalnie)

   Przy obrotach o kąt inny niż prosty ręcznie napisana funkcja geometryczna — largestInnerRect — oblicza największy prostokąt o osiach równoległych i pierwotnych proporcjach, który mieści się w obróconym prostokącie ograniczającym, więc trójkątne puste narożniki są usuwane bez zniekształcania obrazu.
4. 4
   Kodek przeglądarki koduje wynik

   canvas.toBlob() przekazuje dane pikseli wbudowanemu koderowi obrazów przeglądarki, który tworzy Blob JPEG (z wyborem jakości i koloru wypełnienia przezroczystych narożników), PNG lub WebP do bezpośredniego pobrania.

Powiązane narzędzia