Yakınlaştırıldığında Chrome'un küçük resimleri bulanıklaştırmasını nasıl önleyebilirim?

13

Piksel resmini yakından görüntülemeye çalışırken, krom görüntüyü bulanıklaştırmaya başlar. Görüntü yakınlaştırıldığında bile pikselleri bulanık değil, net bir şekilde görebileceğim şekilde yapmak istiyorum.

google-chrome images pixels

— pervane
kaynak

1

Şu anda, kromun görüntüleri yakınlaştırdığınızda kenarlarını düzleştiren kullandığı düzeltme algoritmasını devre dışı bırakabileceğinizi sanmıyorum. Bunu yapan bir uzantı yoksa veya henüz bilmediğim bir şey bilmiyorsa.

— DuckDuckGoose

Yakınlaştırma ile ctrl / cmd ve +?

— booyaa

@booyas, evet, demek istediğim bu.

— Pervane

1

İşler düzeldi, şimdi bu stackoverflow.com/questions/7615009/… 'ın olası bir kopyası . Özellikle, namuol'un cevabına ve jsfiddle.net/namuol/VAXrL/1459 adresindeki jsfiddle'a bakın . TL; krom için DR: "resim oluşturma: pikselli;" img ve tuval öğeleri.

— Don Hatch

Sorunuz değil, ancak görüntüleri en azından daha yüksek kalitede saklamak mümkün mü ve yakınlaştırma ekstra ayrıntıyı kullanır mı?

— Xonatron

16

Güncelleme

Yorumlara göre:

artık Firefox'ta mümkün: görüntü oluşturma: optimizeSpeed; - Arnaud

orijinal

Bu doğrudan tarayıcıdan mümkün değildir.

Düzeltme bir algoritma ile uygulanır ve çoğu modern tarayıcı benzerdir ve IE, Firefox ve Chrome'da bunu kapatmanın bir yolu yoktur.

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

Başka seçenekleriniz var, yukarıdaki bağlantıdan 2 ana nokta, her ikisi de Chrome eklentileri.

görüntü yeniden boyutlandırma
imagezoom

Tarayıcıda aşağıdaki CSS kodunu uygulayabilirsiniz , bu da onu kapatır!

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
kaynak

Ne yazık ki bu Chrome'da çalışmaz (OSX hariç).

— lapo

Bunu Chrome'da tam olarak nasıl / nerede uygulamam gerekir?

— Nyerguds

4

Sadece bunun mümkün olmadığını söylediniz ve daha sonra bunu yapmak için çalışan bir kod yapıştırdınız mı?

— Petr Peller

Hayır @petrpeller, açıkça tarayıcı ile mümkün olmadığını yazdım. Daha sonra bir eklentinin gerekli olduğunu açıklamaya devam ediyorum ... Gönderiyi okuyabildiğinde neden bu soruyu soruyorsun?!?

— Dave

2

image-rendering: -webkit-optimize-contrast;krom çalışma

— wp öğrenci

2

Resimlerle GPU oluşturmayı kullanırken Chrome ve Firefox ile ilgili bazı sorunlar fark ettim. Örneğin:

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

Aşağıdakileri içeren herhangi bir CSS ifadeniz varsa, bunları kaldırmayı deneyin ve görüntü kalitenizin yükselip yükselmediğine bakın.

— bashaus
kaynak

2

Düzeltmeyi devre dışı bırakmak için bu yer işaretini yaptım. Bağlantıyı yer işareti çubuğumda tutuyorum ve genellikle piksel resmi veya klasik oyunlar için bir sayfada kenar yumuşatmayı devre dışı bırakmak istediğimde ona dokunuyorum :

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

Bir yer işaretinin cazip olmasının nedeni, uzantılara "ziyaret ettiğiniz web sitelerindeki tüm verilerinizi okuma ve değiştirme" izni vermekten hoşlanmamamdır.

— Stephen Niedzielski
kaynak

1

2019'da aşağıdaki CSS ile mümkün: image-rendering: pixelated;

— Arnaud
kaynak