Zmiana rozmiaru obrazów za darmo

Jak to działa

Zmiana rozmiaru odbywa się w całości w przeglądarce za pomocą Canvas API — tego samego silnika renderowania, który jest wbudowany w Chrome, Firefox i Safari. Obraz jest rysowany na niewidocznym płótnie w nowych wymiarach i ponownie kodowany lokalnie; nic nie opuszcza urządzenia.

1. 1
   Obraz dekodowany przez przeglądarkę

   Gdy upuścisz lub wybierzesz plik, przeglądarka dekoduje obraz (JPEG, PNG, WebP, AVIF lub GIF) do surowych danych pikseli przez HTMLImageElement. Oryginalne wymiary w pikselach są odczytywane i wstępnie wpisywane w pola szerokości i wysokości.
2. 2
   Canvas przerysowuje w nowym rozmiarze

   Kliknięcie Zmień rozmiar ustawia niewidoczny HTMLCanvasElement na wybraną szerokość i wysokość, a następnie wywołuje ctx.drawImage(), aby przeskalować i namalować każdy piksel w nowych wymiarach. Przy wyniku JPEG najpierw stosowane jest białe tło, aby przezroczyste obszary nie stały się czarne.
3. 3
   canvas.toBlob() koduje wynik

   Wbudowana w przeglądarkę metoda canvas.toBlob() koduje dane pikseli do JPEG, PNG lub WebP z ustawioną jakością. Jeśli podano docelowy rozmiar pliku, 7-krokowe wyszukiwanie binarne automatycznie dostosowuje parametr jakości, aż wynik zmieści się w tym rozmiarze.
4. 4
   Podgląd i pobieranie wyniku lokalnie

   Zakodowany Blob jest zamieniany na adres obiektu dla panelu podglądu — bez odwołań do serwera. Kliknięcie pobierania uruchamia lokalny zapis z nazwą pliku zawierającą końcowe wymiary w pikselach.

Powiązane narzędzia