web-dev-qa-db-fra.com

Comment empêcher Chrome de brouiller les petites images lors d'un zoom avant?

Lorsque j'essaie de voir de près le pixel art, Chrome commence à rendre floue l'image. Je veux faire en sorte que même lorsque l'image est zoomée, je puisse toujours voir les pixels avec des détails nets, pas flous.

google-chromeimagespixels
13
Propeller

Ce n'est pas possible directement depuis le navigateur.

Le lissage est appliqué via un algorithme et la plupart des navigateurs modernes font la même chose et dans IE, Firefox et Chrome, il n’ya aucun moyen de le désactiver.

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

Vous avez d'autres options, voici les 2 points principaux du lien ci-dessus, les deux sont des addons Chrome.

image-resizer
imagezoom

Vous pouvez appliquer le code CSS ci-dessous dans le navigateur , ce qui le désactivera!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }
16
Dave

J'ai constaté des problèmes avec Chrome et Firefox lors de l'utilisation du rendu GPU avec des images. Par exemple.:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Si vous avez des déclarations CSS avec ce qui suit, essayez de les supprimer et voyez si la qualité de votre image augmente.

2
bashaus

J'ai créé ce bookmarklet pour désactiver le lissage. Je garde le lien dans ma barre de favoris et je le touche lorsque je veux désactiver l'antialiasing sur une page, généralement pour le pixel art ou jeu classique :

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

La raison pour laquelle un bookmarklet était attrayant, c'est que je n'aime pas donner aux extensions l'autorisation de "lire et modifier toutes vos données sur les sites Web que vous visitez".

2
Stephen Niedzielski