Javascript - Змінення розміру полотна HTML5 (зменшений масштаб) Переповнення стека зображення високої якості

Я використовую елементи полотна html5 для зміни розміру зображень у моєму браузері. Виявляється, якість дуже низька. Я знайшов це: Вимкніть інтерполяцію при масштабуванні a, але це не сприяє підвищенню якості.

Нижче мій код css та js, а також зображення, масштабоване за допомогою Photoshop і масштабоване в API полотна.

Що мені потрібно зробити, щоб отримати оптимальну якість при масштабуванні зображення в браузері?

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

Змінено розмір зображення за допомогою Photoshop:

javascript

Змінено розмір зображення на полотні:

Я намагався зробити зменшення масштабу більш ніж одним кроком, як було запропоновано в:

Це функція, якою я користувався:

Ось результат, якщо я використовую 2-ступене зменшення розміру:

Ось результат, якщо я використовую 3-ступене зменшення розмірів:

Ось результат, якщо я використовую 4-ступеневий розмір:

Ось результат, якщо я використовую 20-градусний розмір:

Примітка: Виявляється, від 1 до 2 кроків відбувається значне покращення якості зображення, але чим більше кроків ви додаєте до процесу, тим більш нечітким стає зображення.

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

Редагувати 2013-10-04: Я спробував алгоритм GameAlchemist. Ось результат порівняно з Photoshop.

14 Відповіді 14

Оскільки ваша проблема полягає в зменшенні масштабу вашого зображення, немає сенсу говорити про інтерполяцію - що стосується створення пікселів -. Справа тут у зменшенні вибірки.

Щоб зменшити вибірку зображення, нам потрібно перетворити кожен квадрат p * p пікселів у вихідному зображенні в один піксель у цільовому зображенні.