Як запобігти розмиванню Chrome невеликими зображеннями під час збільшення?

13

Коли я намагаюся переглянути піксельне мистецтво близько, хром починає розмивати зображення. Я хочу зробити так, що навіть коли зображення збільшується, я все одно бачу пікселі з чіткими деталями, а не розмитими.

google-chrome images pixels

— Пропелер
джерело

1

На даний момент я не думаю, що ви можете відключити алгоритм згладжування, який використовує хром, який розгладжує краї зображень, коли ви збільшуєте їх. Якщо тільки немає розширення, яке це робить, або хтось знає щось, чого я ще не знаю.

— DuckDuckGoose

Під збільшенням ви маєте на увазі ctrl / cmd і +?

— booyaa

@booyas, так, саме так я маю на увазі.

— Пропелер

1

Все покращилося, тепер це можливий дублікат stackoverflow.com/questions/7615009/… . Зокрема, дивіться відповідь намул та jsfiddle на веб- сайті jsfiddle.net/namuol/VAXrL/1459, який демонструє те, що я думаю, що ви хочете. TL; DR для хромування: "візуалізація зображень: пікселізована;" на елементах img та полотна.

— Дон Хатч

Це не ваше запитання, але чи можна зберігати зображення принаймні більш високої якості, а тоді зум використовує додаткову деталь?

— Xonatron

16

Оновлення

Відповідно до коментарів:

тепер це можливо у Firefox: зображення-рендерінг: optimizeSpeed; - Арно

Оригінал

Це неможливо безпосередньо через браузер.

Згладжування застосовується за допомогою алгоритму, і більшість сучасних браузерів роблять подібне, і в IE, Firefox і Chrome немає можливості вимкнути це.

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

У вас є інші варіанти, ось два основних пункти за посиланням вище, обидва - це доповнення для Chrome.

image-resizer
imagezoom

Ви можете застосувати CSS-код нижче в браузері , що вимкне його!

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

— Дейв
джерело

На жаль, це не працює на Chrome (крім OSX).

— lapo

Як / де саме мені потрібно «застосувати» це в Chrome?

— Nyerguds

4

Ви щойно сказали, що це неможливо, а потім вставили робочий код, щоб насправді це зробити?

— Петро Пеллер

Ні @petrpeller, я чітко написав, що це неможливо безпосередньо в браузері. Потім я пояснюю, що плагін потрібен ... Чому ви ставите це запитання, коли можете прочитати публікацію?!?

— Дейв

2

image-rendering: -webkit-optimize-contrast;працює в chrome

— wp студент

2

Я помітив деякі проблеми з Chrome і Firefox при використанні GPU-рендерінгу із зображеннями. Наприклад:

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

Якщо у вас є будь-які твердження CSS із наведеними нижче, спробуйте їх видалити і побачити, чи підвищується якість зображення.

— bashaus
джерело

2

Я зробив цю закладку для відключення згладжування. Я зберігаю посилання на моїй панелі закладок і натискаю його, коли хочу вимкнути антиалізинг на сторінці, як правило, для піксельної графіки або класичної гри :

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

Причина, що закладка була привабливою, полягає в тому, що мені не подобається давати розширення дозвіл "читати та змінювати всі ваші дані на веб-сайтах, які ви відвідуєте".

— Стівен Нідзельський
джерело

1

Можливо в 2019 році за допомогою наступного CSS: image-rendering: pixelated;

— Арно
джерело