Échelle de l'Image en CSS: est-il webkit alternative pour -moz-crisp-bords?

J'ai une image de 100x100 en pixels. J'en veux pour preuve deux fois la taille, de sorte 200x200 et je veux le faire en CSS et (explicitement), et non par le serveur.

Depuis quelques années, les images sont lissés par tous les navigateurs, au lieu de faire un sous-pixel de l'échelle.

Mozilla permet de spécifier l'algorithme: l'image-rendu: -moz-crisp-bords;
Donc, est-ce que IE: -ms-interpolation-mode: le plus proche voisin;

Connu webkit alternative?

InformationsquelleAutor Martin Kool | 2010-10-10
  1. 15

    Malheureusement, il semble comme cette fonctionnalité est absente dans WebKit. Voir ce récent rapport de bug:

    https://bugs.webkit.org/show_bug.cgi?id=40881

    • Déception 🙁 Merci pour la réponse, tho.
    InformationsquelleAutor VoteyDisciple
  2. 86

    WebKit prend désormais en charge la directive CSS:

    image-rendering:-webkit-optimize-contrast;

    Vous pouvez le constater dans l'action à l'aide de Chrome et de la dernière image sur cette page:

    http://phrogz.net/tmp/canvas_image_zoom.html

    Les règles utilisées sur la page sont:

    .pixelated {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
    • Notez que cette écriture cela fonctionne sur Chrome et Safari sur OS X, mais pas sur Windows.
    • très utile la réponse merci
    • Ne fait aucune différence dans Chrome/Safari ici
    • Quelles sont les versions, sur quel système d'exploitation/version? Eu une tétine en haut de page?
    • OSX 10.6, Dernier Chrome, Safari 5. L'échelle les images sont encore flous. Aucun test pour le moment, désolé, Ce n'est pas un gros problème, vraiment.
    • En fait ce qui montre le problème assez bien phrogz.net/tmp/canvas_image_zoom.html
    • Toujours pas de travail pour chrome sur windows.
    • yep, toujours pas de travail pour moi sur windows chrome Version 27.0.1453.116 m
    • La Version Chrome 30.0.1599.101 (227552) et cela ne fonctionne toujours pas.
    • Il est malheureux que cela ne fonctionne pas avec google Chrome.
    • Yay!!! image-rendering:pixelated est présent dans Chrome v38. Voir aussi: chromestatus.com/feature/5118058116939776
    • Merci beaucoup pour cette réponse!
    • Il ne semble pas fonctionner sur l'image de fond d'écran pour WebKit. Peut-être un bug?
    • Votre toile solution émule pixelated (plus proche voisin), ce qui n'est pas tout à fait la même que croustillant bords dans de nombreux cas. C'est probablement une bonne idée d'utiliser NN et Pix comme un secours avant croquants bords/-webkit-optimiser le contraste et non après. Il y a quelques algorithmes qui peuvent produire des résultats sans nécessairement faire les choses piexlated, et les navigateurs ne les mettre en œuvre.

    InformationsquelleAutor Phrogz
  3. 2

    En plus de @Phrogz très utile de répondre et après lecture de ceci: https://developer.mozilla.org/en-US/docs/CSS/image-rendering

    Il semble que la meilleure CSS serait celui-ci:

    image-rendering:optimizeSpeed;              /* Legal fallback                 */
image-rendering:-moz-crisp-edges;           /* Firefox                        */
image-rendering:-o-crisp-edges;             /* Opera                          */
image-rendering:-webkit-optimize-contrast;  /* Chrome (and eventually Safari) */
image-rendering:crisp-edges;                /* CSS3 Proposed                  */
-ms-interpolation-mode:bicubic;             /* IE8+                           */
    • bicubic? OP dit nearest-neighbor est OK sous IE.
    • J'ai personnellement testé différentes valeurs dans les différents navigateurs et cela a donné le meilleur résultat lors de la mise à l'échelle, je l'ai aussi testé sur IE que c'était une critique du navigateur quand vous faites cela, l'iirc
    • À compter de Mai 2015 cette réponse ne donne pas pixélisé résultats sur la version actuelle de l'ei.
    InformationsquelleAutor Dominic