Ресайз зображень в браузері. Все може стати ще гірше


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

Як з'ясувалося, виною тому стала жадібність і жадібність виробників браузерів, які вирішили заощадити на алгоритмах ресайза зображень і застосувати низькоякісні фільтри. Тоді Маню вдалося врятувати — вона пройшла курс послідовних не кратних двох зменшень, що знизило алиазинг і повернуло її колишню різкість. Але тепер їй знову загрожує небезпека.
Що змінилося за цей рік? Хороші новини в тому, що з'явився стандарт, покликаний керувати якістю растеризації зображень на канвасі. Новини ще краще: цей стандарт реалізований в браузері: мобільному Сафарі з версії 9.3 і десктопному з версії 9.1. І судячи з що виходить результатами, значення
high
відповідає метод згорток з бикубическим або дуже схожим фільтром. Тобто результат дійсно дуже хороший. Здавалося б, можна обернути код, вимучений в попередній статті, в
if ('imageSmoothingQuality' in context)
і чекати появи цього ж властивості в інших браузерах. Але щось пішло не так.

щось пішло не так і на маню напала інша напасть — Маня стала мильній. Виявилося, що Гугл теж готує для Машеньки сюрприз, реалізувавши потрібне властивість і поки що сховавши його за прапором
chrome://flags/#enable-experimental-canvas-features
. Ось тільки реалізовано воно не сумлінно, а чим попало. Замість правильних, чітких, православних згорток, в ньому значення
high
використовується техніка, що застосовується в іграх: з допомогою суперсэмплинга для зображення створюються mip-рівні, а потім найближчий за розміром рівень ресайзится все тим же дешевим методом з фіксованою кількістю вихідних точок.
Чому цей метод працює в іграх? З двох причин. Перша: в динамічній грі у вас немає часу розглядати кожну текстуру окремо, мильна вона чи не дуже. Набагато більше на сприйняття впливає загальна картинка і спецефекти, ніж такі дрібниці. Друга: дуже жорсткі тимчасові обмеження, для яких дуже до речі доводиться постійна складність цього методу щодо розмірів кінцевого зображення (дозволу екрану у випадку ігор).
Чому цей метод не годиться для ресайза в додатках для роботи з графікою? Та тому що це взагалі не метод ресайза, алло. Це аплікація з двох рішень, жодна з яких не здатна задовольнити вимоги до якості, а вже удвох і поготів. Воно не має ні математичним обґрунтуванням, ні стабільністю результату щодо вхідних параметрів. Наприклад, картинка, отресайженая до 244 пікселів в ширину може вийти нічого так, а отресайженая до 243 буде вся в милі. Тим більше це не прийнятно для спеціально створеного з цієї нагоди властивості
imageSmoothingQuality
. Вже якщо я ставлю
high
, то напевно я маю на увазі, що мені потрібно саме висока якість. Навіщо взагалі реалізовувати нову властивість, якщо воно дає результат гірше, ніж можна домогтися, повозившись з існуючим рішенням? Ось, наприклад, праворуч Маня отресайженая послідовними не кратні двом уменьшениями. Абсолютно здоровий і щасливий дитина.

Якщо ви раптом не відчуваєте співчуття і симпатії до маленьким дітям, то ось вам Манечкин друг, мандрил Пупуся. Його спіткала така ж біда. Зліва направо:
  • заблюреная картинка після ресайза в Хромі з
    imageSmoothingQuality = 'high'
  • якісна картинки з Сафарі
  • більш-менш якісна картинка після ресайза в Хромі методом послідовних зменшень
    imageSmoothingQuality

Як тут можна допомогти? Ну наприклад, піти поставити зірочку у створеному для цього баг-репотре. Не впевнений, наскільки це ефективно, але нічого іншого придумати не можу.
Що ж буде, якщо ця фіча перекочує в стабільну версію Хрому? Замість простої перевірки на наявність фічі, доведеться або городити перевірку за юзер-агенту, або відключати цю функціональність для всіх користувачів, навіть у Сафарі. В голову прийшла правильна ідея: треба піти і прямо зараз поставити додаткову перевірку на те, що в юзерагенте немає слова Хром. Якщо Хром виправиться і в стабільній версії не буде цього ганьби, можна буде включити. Зате якщо хтось з клієнтів скачає код зараз, при виході бажного Хрому Маня не постраждає.
Для отримання використовувалися зображення раз і два, тестовий стенд, а також виджет для послідовних зменшень.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.