Als webontwikkelaars spelen we voortdurend met afbeeldingen en in de meeste gevallen zijn browsers uitstekend in het schalen van afbeeldingen zodat ze binnen de grenzen van onze site-ontwerpen passen, terwijl de afbeeldingen mooi blijven. Maar wat gebeurt er als u wilt bepalen hoe de browser de afbeeldingen op uw pagina schaalt?
Chrome 41 (bèta in januari 2015) introduceert een nieuwe CSS image-rendering: pixelated ( Spec ), waarmee u iets meer controle krijgt over hoe de browser een opgeschaalde afbeelding weergeeft.
De CSS-eigenschap image-rendering en de waarde pixelated zijn interessant omdat ze de standaard vloeiende schaling van de browser (normaal bilineaire interpolatie) uitschakelen en vervangen door een ander schalingsalgoritme (in de meeste gevallen de dichtstbijzijnde buur) bij het wijzigen van het formaat van de afbeeldingen.
Stel je voor dat je een afbeelding hebt van 2×2 pixels en je schaalt deze op naar 100×100 pixels, dan geeft de browser deze weer op een manier waardoor deze er niet blokkerig uitziet. Zoiets als:
Er zijn veel gevallen waarin u dit afvlakkingsgedrag niet wilt en in plaats daarvan een methode gebruikt die een nauwkeurigere weergave van de afbeelding behoudt.
Om dit effect te verkrijgen, past u eenvoudigweg image-rendering: pixelated; naar uw afbeelding als volgt.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Probeer de demo . Zoals u kunt zien, heeft de toepassing van de eigenschap een aanzienlijk effect op de manier waarop de afbeelding wordt weergegeven.
Deze eigenschap kan op veel plaatsen worden toegepast:
-
<img>elementen -
<canvas style="image-rendering: pixelated">elementen - Elk element met de eigenschap
background-image
Ik begrijp het nog steeds niet. Waar moet ik dit gebruiken?
Als u alleen maar foto's op uw site laat zien, wilt u dit waarschijnlijk niet.
Een geweldige use-case zijn games, je moet het canvas vaak opschalen om het correct op de schermgrootte te laten passen. Voorafgaand aan deze CSS-eigenschap interpoleerde de browser het canvas op een zodanige manier dat het er wazig uitzag (zie hieronder [sic]).
Als u een tool voor vliegtickets bouwt, of een app die QR-codes weergeeft, zal de gebruiker vaak willen dat deze op volledig scherm wordt weergegeven, zodat deze gemakkelijker kan worden gescand. Het controleren van de beeldweergave is dus van cruciaal belang.
Als u geïnteresseerd bent om de implementatie te zien, bekijk dan nummer 317991 (deze wordt opengelaten voor de implementatie van de scherpe randenwaarde. Geef de kwestie een ster om de implementatie te volgen).