Wie kann ich verhindern, dass Chrome beim Vergrößern kleine Bilder unscharf macht?

13

Wenn ich versuche, Pixelkunst aus der Nähe zu betrachten, wird das Bild durch Chrom unscharf. Ich möchte es so machen, dass ich die Pixel auch beim Vergrößern des Bildes in gestochen scharfen Details sehen kann, nicht in unscharfen.

google-chrome images pixels Propeller
quelle
1
Im Moment glaube ich nicht, dass Sie den von Chrome verwendeten Glättungsalgorithmus deaktivieren können, mit dem die Kanten der Bilder beim Vergrößern geglättet werden. Es sei denn, es gibt eine Erweiterung, die dies tut, oder jemand weiß etwas, was ich noch nicht weiß.
DuckDuckGoose
Mit Zoomen meinen Sie Strg / Cmd und +?
Booyaa
@booyas, ja, das meine ich.
Propeller
1
Die Dinge haben sich verbessert, jetzt ist dies ein mögliches Duplikat von stackoverflow.com/questions/7615009/… . Siehe namuols Antwort und jsfiddle unter jsfiddle.net/namuol/VAXrL/1459, die zeigen, was Sie meiner Meinung nach wollen. TL; DR für Chrome: "Bildwiedergabe: pixelig;" auf img und canvas elementen.
Don Hatch
Nicht Ihre Frage, aber ist es möglich, die Bilder zumindest in höherer Qualität zu speichern, und würde der Zoom dann das zusätzliche Detail verwenden?
Xonatron

Antworten:

16

Aktualisieren

Wie aus den Kommentaren hervorgeht:

es ist jetzt in Firefox möglich: image-rendering: OptimizeSpeed; - Arnaud

Original

Dies ist nicht direkt über den Browser möglich.

Die Glättung wird über einen Algorithmus angewendet und die meisten modernen Browser funktionieren ähnlich. In IE, Firefox und Chrome gibt es keine Möglichkeit, dies zu deaktivieren.

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

Sie haben andere Möglichkeiten, hier sind die 2 wichtigsten Punkte aus dem obigen Link, beide sind Chrome-Addons.

Bild-Resizer
ImageZoom

Sie können den unten stehenden CSS-Code im Browser anwenden , wodurch er deaktiviert wird!

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: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }
Dave
quelle
Leider funktioniert dies unter Chrome nicht (außer unter OSX).
Lapo
Wie / wo genau müsste ich das in Chrome "anwenden"?
Nyerguds
4
Haben Sie gerade gesagt, dass es nicht möglich ist, und dann einen Arbeitscode eingefügt, um es tatsächlich zu tun?
Petr Peller
Nein @petrpeller, ich habe klar geschrieben, dass es nicht direkt mit dem Browser möglich ist. Ich erkläre dann weiter, dass ein Plugin erforderlich ist ... Warum stellst du diese Frage, wenn du den Beitrag lesen kannst?!?
Dave
2
image-rendering: -webkit-optimize-contrast;Arbeiten in Chrom
WP Student
2

Ich habe einige Probleme mit Chrome und Firefox festgestellt, wenn ich GPU-Rendering mit Bildern verwende. Z.B:

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

Wenn Sie CSS-Anweisungen mit den folgenden Angaben haben, entfernen Sie sie und prüfen Sie, ob sich die Bildqualität verbessert.

Bashaus
quelle
2

Ich habe dieses Lesezeichen erstellt, um das Glätten zu deaktivieren. Ich behalte den Link in meiner Lesezeichenleiste und tippe darauf, wenn ich das Antialiasing auf einer Seite deaktivieren möchte, normalerweise für Pixel Art oder klassisches Spielen :

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);
  }
})()

Der Grund, warum ein Lesezeichen ansprechend war, ist, dass ich Erweiterungen nicht die Berechtigung "Lesen und Ändern aller Ihrer Daten auf den von Ihnen besuchten Websites" erteilen möchte.

Stephen Niedzielski
quelle
1

Möglich ab 2019 mit folgendem CSS: image-rendering: pixelated;

Arnaud
quelle