Comment désactiver l'anticrénelage lors de la mise à l'échelle des images ?

Désactiver l'anticrénelage lors de la mise à l'échelle des images

Arrière-plan

Lors de la mise à l'échelle des images, l'anticrénelage est souvent utilisé pour créer une transition douce entre les pixels, réduisant ainsi les bords irréguliers . Cependant, dans certains cas, il peut être souhaitable de conserver les bords nets, notamment lorsqu'il s'agit de pixel art ou de graphiques en blocs.

Solution CSS

Traditionnellement, CSS ne dispose pas d'un indicateur spécifique pour désactiver l'anticrénelage. Cependant, plusieurs propriétés spécifiques au fournisseur peuvent fournir cette fonctionnalité :

• image-rendering : -moz-crisp-edges ; (Firefox)
• rendu d'image : -o-crisp-edges ; (Opera)
• rendu d'image : -webkit-optimize-contrast ; (Chrome et Safari)
• -ms-interpolation-mode : voisin le plus proche ; (IE8)

Ces propriétés, lorsqu'elles sont appliquées aux images, donnent la priorité aux bords nets et réduisent les effets de l'anticrénelage.

Implémentation

Pour désactiver l'anticrénelage pour toutes les images d'arrière-plan dans une feuille de style CSS, utilisez le code suivant :

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

Non-CSS Solutions

Bien que CSS offre la solution la plus simple, il ne fonctionne pas toujours sur les images d'arrière-plan. Dans de tels cas, des méthodes alternatives telles que JavaScript ou des outils d'édition d'images peuvent être envisagées :

• HTMLCanvasElement : Utilisez la méthode drawImage() avec le paramètre imageSmoothingEnabled défini sur false.
• ImageMagick : Appliquez l'option -filter NearestNeighbor au image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!