Bagaimana mencegah Chrome mengaburkan gambar kecil saat diperbesar?

Ketika saya mencoba untuk melihat seni pixel dari dekat, chrome mulai mengaburkan gambar. Saya ingin membuatnya sehingga bahkan ketika gambar diperbesar, saya masih bisa melihat piksel dengan detail yang tajam, bukan yang kabur.

google-chrome images pixels

— Baling-baling
sumber

Saat ini saya tidak berpikir Anda dapat menonaktifkan algoritma penghalusan yang digunakan chrome yang menghaluskan tepi gambar ketika Anda memperbesarnya. Kecuali ada ekstensi yang melakukannya atau seseorang tahu sesuatu yang belum saya ketahui.

— DuckDuckGoose

Maksud Anda zooming dengan ctrl / cmd dan +?

— booyaa

@ Booyas, ya, itulah yang saya maksud.

— Baling

Banyak hal telah membaik, sekarang ini adalah duplikat dari stackoverflow.com/questions/7615009/… . Secara khusus, lihat jawaban dan jsfiddle namuol di jsfiddle.net/namuol/VAXrL/1459 yang menunjukkan apa yang saya pikir Anda inginkan. TL; DR untuk chrome: "rendering gambar: pixelated;" pada elemen img dan kanvas.

— Don Hatch

Bukan pertanyaan Anda, tetapi mungkinkah untuk menyimpan gambar dalam kualitas yang lebih tinggi setidaknya, dan kemudian akankah zoom menggunakan detail ekstra?

— Xonatron

Jawaban:

Ini tidak mungkin secara langsung dari browser.

Perataan diterapkan melalui suatu algoritma dan sebagian besar browser modern melakukan hal serupa dan di IE, Firefox dan Chrome tidak ada cara untuk mematikannya.

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

Anda memiliki opsi lain, berikut adalah 2 poin utama dari tautan di atas, keduanya adalah add-on Chrome.

image-resizer
imagezoom

Anda dapat menerapkan kode CSS di bawah ini di browser , yang akan mematikannya!

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+                */
    }

— Dave
sumber

Sayangnya ini tidak berfungsi pada Chrome (kecuali pada OSX).

— Lapo

Bagaimana / di mana tepatnya saya perlu 'menerapkan' ini di Chrome?

— Nyergud

Apakah Anda baru saja mengatakan itu tidak mungkin dan kemudian menempel kode kerja untuk benar-benar melakukannya?

— Petr Peller

Tidak @petrpeller, saya jelas menulis bahwa itu tidak mungkin secara langsung dengan browser. Saya kemudian menjelaskan bahwa diperlukan sebuah plugin ... Mengapa Anda menanyakan pertanyaan ini ketika Anda dapat membaca posting?!?

— Dave

image-rendering: -webkit-optimize-contrast;bekerja di chrome

— wp student

Saya perhatikan beberapa masalah dengan Chrome dan Firefox saat menggunakan rendering GPU dengan gambar. Misalnya:

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

Jika Anda memiliki pernyataan CSS dengan yang berikut ini, coba hapus dan lihat apakah kualitas gambar Anda meningkat.

— bashaus
sumber

Saya membuat bookmarklet ini untuk menonaktifkan perataan. Saya menyimpan tautan di bilah bookmark saya dan mengetuknya ketika saya ingin menonaktifkan antialiasing pada halaman, biasanya untuk pixel art atau game klasik :

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

Alasan bookmarklet menarik adalah karena saya tidak suka memberi ekstensi izin "baca dan ubah semua data Anda di situs web yang Anda kunjungi".

— Stephen Niedzielski
sumber