Jak zapobiec rozmyciu przez Chrome małych zdjęć po powiększeniu?

13

Kiedy próbuję zobaczyć obraz w pikselach z bliska, chrom zaczyna rozmywać obraz. Chcę to zrobić, aby nawet po powiększeniu obrazu nadal widziałem piksele z wyraźnymi szczegółami, a nie rozmytymi.

google-chrome images pixels Śmigło
źródło
1
W tej chwili nie sądzę, że można wyłączyć algorytm wygładzania, który stosuje chrom, który wygładza krawędzie obrazów podczas ich powiększania. Chyba że istnieje takie rozszerzenie lub ktoś wie coś, czego jeszcze nie wiem.
DuckDuckGoose
Przez powiększanie masz na myśli ctrl / cmd i +?
booyaa,
@ booyas, tak, o to mi chodzi.
Śmigło
1
Rzeczy uległy poprawie, teraz jest to możliwe duplikat stackoverflow.com/questions/7615009/... . W szczególności zapoznaj się z odpowiedzią namuola i jsfiddle na jsfiddle.net/namuol/VAXrL/1459, która pokazuje, czego myślę, że chcesz. TL; DR dla chrome: „rendering obrazu: pikselowany;” na elementach img i canvas.
Don Hatch
Nie twoje pytanie, ale czy możliwe jest przechowywanie obrazów przynajmniej w wyższej jakości, a wtedy zoom użyłby dodatkowych szczegółów?
Xonatron

Odpowiedzi:

16

Aktualizacja

Zgodnie z komentarzami:

teraz jest to możliwe w przeglądarce Firefox: rendering obrazu: optimizeSpeed; - Arnaud

Oryginalny

Nie jest to możliwe bezpośrednio z przeglądarki.

Wygładzanie odbywa się za pomocą algorytmu, a większość współczesnych przeglądarek działa podobnie, aw IE, Firefox i Chrome nie ma sposobu, aby to wyłączyć.

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

Masz inne opcje, oto 2 główne punkty z powyższego linku, oba to dodatki do Chrome.

image-resizer
imagezoom

Możesz zastosować poniższy kod CSS w przeglądarce , który go wyłączy!

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
źródło
Niestety nie działa to w Chrome (oprócz OSX).
lapo
Jak / gdzie dokładnie powinienem „zastosować” to w Chrome?
Nyerguds,
4
Czy właśnie powiedziałeś, że to niemożliwe, a następnie wkleiłeś działający kod, aby to zrobić?
Petr Peller
Nie @petrpeller, wyraźnie napisałem, że nie jest to możliwe bezpośrednio w przeglądarce. Następnie wyjaśniam, że wymagana jest wtyczka ... Dlaczego zadajesz to pytanie, kiedy możesz przeczytać post?!?
Dave
2
image-rendering: -webkit-optimize-contrast;praca w chrome
wp student
2

Zauważyłem pewne problemy z Chrome i Firefox podczas korzystania z renderowania GPU z obrazami. Na przykład:

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

Jeśli masz jakieś instrukcje CSS z następującymi, spróbuj je usunąć i sprawdź, czy jakość obrazu wzrośnie.

bashaus
źródło
2

Zrobiłem ten bookmarklet, aby wyłączyć wygładzanie. Trzymam link na pasku zakładek i stukam go, gdy chcę wyłączyć antyaliasing na stronie, zwykle w przypadku grafiki pikselowej lub klasycznych gier :

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

Powodem, dla którego bookmarklet był atrakcyjny, jest to, że nie lubię nadawać rozszerzeniom uprawnienia „czytaj i zmieniaj wszystkie swoje dane w odwiedzanych witrynach”.

Stephen Niedzielski
źródło
1

Możliwe w 2019 roku z następującym CSS: image-rendering: pixelated;

Arnaud
źródło