Vaizdų perteikimas - CSS-gudrybės

Į image-renderingnuosavybės apibrėžiama, kaip naršyklė turi teikiantys vaizdą, jei ji yra sumažinta aukštyn arba žemyn iš savo originalių matmenų. Pagal numatytuosius nustatymus kiekviena naršyklė bandys pritaikyti slapyvardį šiam mastelio vaizdui, kad būtų išvengta iškraipymų, tačiau kartais tai gali būti problema, jei norime, kad vaizdas išsaugotų savo pradinę taškų formą.

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

Apie šias tris galimas vertes:

auto: numatytoji vertė, kuri naudoja naršyklės standartinį algoritmą, kad maksimaliai padidintų vaizdo išvaizdą.
crisp-edges: vaizdo kontrastas, spalvos ir kraštai bus išsaugoti neišlyginant ir neryškinant. Pagal specifikaciją tai buvo specialiai skirta pikselių menui. Ši vertė taikoma vaizdams, padidintiems arba sumažintiems.
pixelated: keičiant vaizdo dydį, naršyklė išsaugos savo taškų stilių naudodama artimiausio kaimyno mastelį. Ši reikšmė taikoma tik padidintiems vaizdams.

Ši savybė gali būti taikoma fono paveikslėliams, canvaselementams ir įterptiems vaizdams. Tačiau svarbu pažymėti, kad šių verčių testavimas šiuo metu yra ypač painus, nes nėra nuoseklios naršyklės palaikymo.

Pavyzdys

Štai labai mažas įterptas vaizdas, kurį sudaro keturi spalvoti pikseliai:

Jei pakeisime šio vidinio vaizdo plotį 300pxį „Chrome“ (41), rasime, kad naršyklė bandė kuo geriau optimizuoti vaizdą:

Norėdami išsaugoti pradinę pikselių išvaizdą, galime naudoti šią pixelatedvertę, pavyzdžiui:

img ( image-rendering: pixelated; )

Dėl to naršyklė pasirenka alternatyvų algoritmą, kuriuo apdorojamas vaizdas. Šiame pavyzdyje „Chrome“ pašalins numatytąjį slapyvardį:

Deja, po daugybės bandymų atrodo, kad naršyklės šiuo metu interpretuoja vertes crisp-edgesir pixelatedreikšmes labai painiai, todėl svarbu dar kartą atkreipti dėmesį, kad ši specifikacija yra pati ankstyviausia. Pvz., Atrodo, kad „Chrome“ atvaizduoja pixelatedvaizdus taip, kaip vaizdus pateikia „Firefox“ ir „Safari“ crisp-edges.

QR kodo pavyzdys

Kitas šios ypatybės naudojimo atvejis gali būti QR kodai, kai norite padidinti jo dydį neiškraipydami naudodami standartinį antialiazą. Būtinai patikrinkite šį pavyzdį viso ekrano režimu, kad pamatytumėte vaizdą:

Peržiūrėkite Robin Rendle (@robinrendle) „Pen Image-rendering“ demonstracinę versiją „CodePen“.

Perjungti pavyzdį

Žemiau esančiame rašiklyje galima perjungti šias reikšmes ir pamatyti naršyklių neatitikimus:

Peržiūrėkite Robin Rendle (@robinrendle) „Pen Image“ atvaizdavimo demonstraciją „CodePen“.

Naršyklės palaikymas

crisp-edgesŠiuo metu reikalingi tiekėjo priešdėliai ( -moz-crisp-edges), kad būtų galima kuo geriau palaikyti.

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.