Vykresľovanie obrázkov - Triky CSS

Táto image-renderingvlastnosť definuje, ako má prehliadač vykresliť obrázok, ak je zmenšený alebo zmenšený z pôvodných rozmerov. V predvolenom nastavení sa každý prehliadač pokúsi použiť aliasing na tento zmenšený obrázok, aby sa zabránilo skresleniu, čo však môže byť niekedy problém, ak chceme, aby si obrázok zachoval svoju pôvodnú pixelovanú formu.

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

O týchto troch možných hodnotách:

auto: predvolená hodnota, ktorá používa štandardný algoritmus prehľadávača na maximalizáciu vzhľadu obrázka.
crisp-edges: kontrast, farby a okraje obrázka sa zachovajú bez vyhladenia alebo rozmazania. Podľa špecifikácie to bolo špeciálne určené pre pixelové umenie. Táto hodnota platí pre obrázky zväčšené alebo zmenšené.
pixelated: pri zmene veľkosti obrázka si prehliadač zachová pixelovaný štýl pomocou zmeny mierky najbližšieho suseda. Táto hodnota platí iba pre obrázky, ktoré sú zväčšené.

Túto vlastnosť je možné použiť na obrázky na pozadí, canvasprvky aj na vložené obrázky. Je dôležité si uvedomiť, že súčasné testovanie týchto hodnôt je obzvlášť mätúce z dôvodu chýbajúcej podpory prehliadača.

Príklad

Tu je veľmi malý vložený obrázok, ktorý sa skladá zo štyroch farebných pixelov:

Ak zmeníme šírku tohto vloženého obrázka na 300pxpôvodnú v prehliadači Chrome (41), zistíme, že sa prehliadač pokúsil optimalizovať obrázok čo najlepšie:

Na zachovanie pôvodného pixelovaného vzhľadu môžeme použiť nasledujúcu pixelatedhodnotu, napríklad:

img ( image-rendering: pixelated; )

To má za následok, že prehliadač zvolí alternatívny algoritmus, pomocou ktorého bude obrázok spracovaný. V tomto príklade Chrome odstráni predvolené aliasy:

Po mnohých testoch sa bohužiaľ zdá, že prehliadače v súčasnosti interpretujú hodnoty crisp-edgesa pixelatedveľmi mätúcim spôsobom, takže je potrebné ešte raz poznamenať, že táto špecifikácia je v začiatkoch. Napríklad sa zdá, že Chrome vykresľuje pixelatedobrázky rovnakým spôsobom, ako ich vykresľujú prehliadače Firefox a Safari crisp-edges.

Príklad QR kódu

Ďalším prípadom použitia tejto vlastnosti môžu byť QR kódy, pri ktorých chcete zväčšiť ich veľkosť bez toho, aby ste ich skreslili pomocou štandardného vyhladzovania. Nezabudnite skontrolovať tento príklad v režime celej obrazovky, aby ste videli roztiahnutie obrázka:

Prezrite si ukážku vykreslenia obrázka pera od Robina Rendleho (@robinrendle) na serveri CodePen.

Prepnúť príklad

V peru nižšie je možné prepínať medzi týmito hodnotami a vidieť nezrovnalosti medzi prehľadávačmi:

Prezrite si ukážku vykreslenia obrázka pera od Robina Rendleho (@robinrendle) na serveri CodePen.

Podpora prehliadača

crisp-edgesmomentálne vyžaduje predponu dodávateľa ( -moz-crisp-edges), aby získala najlepšiu možnú podporu.

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.