Vykreslování obrázků - Triky CSS

K image-renderingvlastnictví definuje, jak má prohlížeč vykreslení obrazu, je-li zvětšovat nebo zmenšovat ze svých původních rozměrů. Ve výchozím nastavení se každý prohlížeč pokusí použít aliasing na tento zmenšený obrázek, aby se zabránilo zkreslení, ale to může být někdy problém, pokud chceme, aby si obrázek zachoval svou původní pixelovou podobu.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

O těchto třech možných hodnotách:

auto: výchozí hodnota, která používá standardní algoritmus prohlížeče k maximalizaci vzhledu obrázku.
crisp-edges: kontrast, barvy a okraje obrazu budou zachovány bez jakéhokoli vyhlazení nebo rozmazání. Podle specifikace to bylo speciálně určeno pro pixelové umění. Tato hodnota platí pro obrázky zvětšené nebo zmenšené.
pixelated: jak obrázek mění velikost, prohlížeč si zachová svůj pixelový styl pomocí škálování nejbližšího souseda. Tato hodnota platí pouze pro obrázky, které jsou zvětšeny.

Tuto vlastnost lze použít na obrázky na pozadí, canvasprvky i vložené obrázky. Je důležité si uvědomit, že testování těchto hodnot v tuto chvíli je obzvláště matoucí kvůli nedostatku konzistentní podpory prohlížeče.

Příklad

Tady je velmi malý vložený obrázek, který se skládá ze čtyř barevných pixelů:

Pokud změníme šířku tohoto vloženého obrázku na 300pxv prohlížeči Chrome (41), zjistíme, že se prohlížeč pokusil obrázek optimalizovat, jak nejlépe umí:

Pro zachování původního pixelového vzhledu můžeme použít následující pixelatedhodnotu, například:

img ( image-rendering: pixelated; )

Výsledkem je, že prohlížeč vybere alternativní algoritmus, pomocí kterého bude obraz zpracován. V tomto příkladu Chrome odstraní výchozí aliasing:

Bohužel po mnoha testech se zdá, že prohlížeče v tuto chvíli interpretují hodnoty crisp-edgesa pixelatedvelmi matoucím způsobem, takže je třeba znovu poznamenat, že tato specifikace je ve svých raných dobách. Například se zdá, že Chrome vykresluje pixelatedobrázky stejným způsobem, jakým je vykreslí Firefox a Safari crisp-edges.

Příklad QR kódu

Dalším případem použití této vlastnosti může být kód QR, kde chcete zvětšit jeho velikost, aniž byste jej zkreslili pomocí standardního vyhlazování. Nezapomeňte zkontrolovat tento příklad v režimu celé obrazovky, abyste viděli roztažení obrazu:

Podívejte se na ukázku vykreslování pera od Robina Rendleho (@robinrendle) na CodePen.

Přepnout příklad

V níže uvedeném peru je možné přepínat mezi těmito hodnotami a zobrazit nesrovnalosti mezi prohlížeči:

Podívejte se na ukázku vykreslování pera Image Robin Rendle (@robinrendle) na CodePen.

Podpora prohlížeče

crisp-edgesv současné době vyžaduje předpony dodavatelů ( -moz-crisp-edges), aby získala nejlepší možnou podporu.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.