Jak funguje ořez obrázků v prohlížeči
Proces ořezu probíhá zcela uvnitř vaší záložky prohlížeče pomocí Canvas API. Žádné serverové zpracování, žádné nahrávání, žádné služby třetích stran. Každý krok probíhá na vašem zařízení.
- Načtěte obrázek do prvku
<img>, aby jej prohlížeč dekódoval lokálně. Canvas overlay vykreslí obrázek škálovaný na velikost viewportu, zatímco přetahovatelný výběrový obdélník ukazuje aktuální oblast ořezu. - Přetáhněte obdélník za hrany nebo rohy pro úpravu oblasti ořezu. Obdélník zůstává uzamčen k okrajům obrázku, takže nemůžete vybrat oblast mimo něj. Při aktivním pevném poměru stran (1:1, 16:9, 4:3) změna velikosti automaticky zachovává tento poměr.
- Údaje o pixelech se aktualizují za běhu při přetahování a zobrazují aktuální šířku, výšku a pozice X, Y v souřadnicích obrazových pixelů. To umožňuje cílit na přesné rozměry bez hádání.
- Po kliknutí na Oříznout a stáhnout stránka vykreslí pouze vybranou oblast zdrojového obrázku na offscreen canvas v původním rozlišení a exportuje výsledek pomocí
canvas.toBlob()ve stejném formátu jako zdrojový soubor. Pro stažení je vygenerováno Blob URL.
Proč ořezávat obrázky online?
- Ořez odstraňuje nechtěné okraje, prázdné místo nebo vizuální nepořádek. Jeden ořez často zlepší kompozici fotografie více než jakýkoli filtr nebo úprava barev.
- Kontrola poměru stran je zásadní pro publikační platformy. Sociální sítě očekávají 1:1 pro profily, 16:9 pro video náhledy a 4:3 pro standardní fotografii. Ořez na správný poměr zabrání nepěknému letterboxingu nebo oříznutí při nahrávání.
- Klientský ořez je jedinou možností na uzamčených firemních zařízeních bez editoru fotografií. Protože se nic nenahrává, nehrozí únik dat a není potřeba schvalování pro citlivé obrázky.
- Živé zobrazení rozměrů odstraňuje hádání. Vidíte pixelové souřadnice a velikost výběru při přetahování, takže můžete oříznout na přesnou šířku a výšku bez přepínání do nástroje pro měření pixelů.
Běžná použití ořezu
Ořez je jedna z nejčastějších úprav obrázků při web publikování, sociálních sítích a vývoji softwaru. Zde jsou tři scénáře, kde ořez v prohlížeči šetří čas.
- Příprava produktových fotografií pro online obchod. Ořízněte na konzistentní poměr 1:1 nebo 4:5, aby každý náhled produktu seděl v mřížce. Export zachovává původní formát, takže JPEG produktové fotky zůstávají jako JPEG.
- Ořez screenshotů pro dokumentaci nebo hlášení chyb. Ořízněte panel nástrojů prohlížeče, hlavní panel Windows nebo citlivá oznámení před připojením obrázku k ticketu nebo pull requestu.
- Rámování hero obrázku nebo banneru pro vstupní stránku. Uzamkněte předvolbu 16:9, umístěte nejdůležitější část fotografie do středu ořezového obdélníku a exportujte v původním rozlišení pro nejlepší kvalitu na retina displejích.
Příklad: ořez 4000×3000 fotografie na 1200×675 pro hero banner
4000×3000 pixelová fotografie z digitálního foťáku je pro typický webový hero banner příliš velká. Banner může mít 1200×675 (16:9 rámeček).
Přetáhněte fotografii do nahrávací zóny. Obrázek se načte v plném rozlišení, ale škáluje se na velikost viewportu pro pohodlné přetahování. Vyberte předvolbu poměru stran 16:9. Ořezový obdélník okamžitě přeskočí na největší 16:9 oblast, která se do obrázku vejde. Přetáhněte obdélník pro umístění ohniskového bodu — vrchol hory, produkt, tvář osoby — do rámečku. Živé údaje ukazují aktuální výběr 4000×2250 (16:9 okno celého obrázku). Chyťte rohový úchyt a táhněte dovnitř, dokud šířka nedosáhne 1200 px. Výška se automaticky přizpůsobí, protože poměr je uzamčen. Klikněte na Oříznout a stáhnout. Stránka extrahuje vybranou oblast 1200×675 z původních pixelů a doručí oříznutý soubor ve zdrojovém formátu. Celý proces trvá vteřinu nebo dvě a nespotřebovává žádnou šířku pásma kromě počátečního načtení stránky.
Které formáty obrázků jsou podporovány pro ořez?
Nástroj přijímá jakýkoli formát, který prohlížeč dokáže dekódovat: PNG, JPEG a WebP pokrývají téměř všechny reálné případy použití. Oříznutý výstup je uložen ve stejném formátu jako zdrojový soubor. PNG zůstává bezztrátový, JPEG si zachovává původní úroveň kvality a WebP zůstává WebP. Formát je detekován z MIME typu zdrojového souboru.
Zmenší ořez velikost souboru obrázku?
Ořez odstraňuje pixely, takže výstupní soubor je typicky menší než zdroj, zvláště když oříznete velký okraj nebo prázdnou oblast. Export používá původní formát souboru a jeho parametry kódování — PNG zůstává bezztrátový, JPEG si zachovává původní nastavení kvality — takže úspora pochází pouze ze sníženého počtu pixelů, nikoli z rekomprese.
Co dělají předvolby poměru stran?
Předvolby (1:1, 16:9, 4:3, 3:2, 9:16) uzamykají poměr šířky a výšky ořezového obdélníku. Když je předvolba aktivní, přetažení libovolného rohu nebo hrany upravuje velikost výběru při zachování konstantního poměru. Přepnutí do režimu Volný odstraní omezení, takže můžete obdélník libovolně měnit. Poměr je vynucen v souřadnicích obrazových pixelů, takže exportovaný výstup má přesně vámi zvolený poměr stran.
Nahrává se obrázek na server?
Ne. Obrázek nikdy neopouští vaše zařízení. Stránka používá File API prohlížeče k načtení obrázku do paměti a Canvas API k ořezu a exportu výsledku. Můžete to ověřit otevřením panelu Network v DevTools — jediné odchozí požadavky během ořezu jsou počáteční načtení stránky a reklamní volání. Žádná data obrázku nejsou přenášena.
Mohu oříznout konkrétní oblast zadáním přesných pixelových souřadnic?
Aktuální verze upravuje ořezový obdélník prostřednictvím přetahování na náhledu obrázku. Můžete číst živé pixelové souřadnice X, Y, šířky a výšky výběru. Přímý numerický vstup pro ořezový obdélník není ve v1 k dispozici, ale je plánován jako vylepšení pro budoucí aktualizaci.
Co se stane s původním obrázkem?
Původní soubor zůstává na vašem zařízení. Stránka jej načte do paměti pro zobrazení a ořez, ale nikdy nemění zdrojový soubor na disku. Oříznutý výstup je nový soubor, který stahujete samostatně. Originál zůstává nedotčený na svém původním místě ve vašem počítači nebo telefonu.
Existuje limit velikosti souboru pro ořez?
Nástroj dodržuje limit 30 MB na soubor v nahrávací zóně, aby udržel paměť prohlížeče pod kontrolou na méně výkonných zařízeních. Pokud je váš obrázek větší než 30 MB, můžete jej nejprve zmenšit pomocí specializovaného nástroje na změnu velikosti a poté načíst sem pro ořez.
Funguje ořez na mobilních telefonech a tabletech?
Ano. Úchyty ořezu jsou dimenzovány s ohledem na dotykové ovládání a interakce používá pointer events, které fungují jak s myší, tak s dotykovými prsty. Na obrazovce telefonu se náhled obrázku přizpůsobí dostupné šířce a ovládací prvky se skládají vertikálně pro snadné jednoruční použití.