Оптимизация качества изменения размера изображений в HTML5 Canvas

Быстрый ответ

Для улучшения качества уменьшенного изображения на холсте HTML5, используйте метод постепенного уменьшения размера. Он предусматривает сокращение размера на каждом этапе в два раза до тех пор, пока изображение не станет вдвое больше заданных размеров. Завершающим этапом будет конечное уменьшение до заданных размеров. Вот пример кода:

function highQualityDownscale(sourceCanvas, targetWidth, targetHeight) {
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    canvas.width = sourceCanvas.width;
    canvas.height = sourceCanvas.height;
    ctx.drawImage(sourceCanvas, 0, 0);

    while (canvas.width > targetWidth * 2) {
        canvas.width *= 0.5;
        canvas.height *= 0.5;
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);
    }

    let finalCanvas = document.createElement('canvas');
    finalCanvas.width = targetWidth;
    finalCanvas.height = targetHeight;
    finalCanvas.getContext('2d').drawImage(canvas, 0, 0, targetWidth, targetHeight);
    return finalCanvas;
}

Вызывая функцию highQualityDownscale с исходным холстом и заданными размерами, вы получите изображение, качественно уменьшенное до указанных размеров.

Методы уменьшения размера изображения

Существуют различные методы для качественного изменения размеров изображений на холсте Canvas. Бикубическая интерполяция, используемая по умолчанию в браузерах, иногда оказывается недостаточной. Подробнее рассмотрим некоторые способы улучшения:

Уменьшение размера с помощью фильтра Гермита

Фильтр Гермита позволяет сохранять качество изображения, а с помощью Web workers можно ускорить его обработку. Этот метод прекрасно сочетает в себе качество и скорость.

Подробнее об этом расскажет наш спикер на видео

Библиотека Pica и фильтры Ланцоша

Библиотека Pica использует фильтры Ланцоша, которые хорошо зарекомендовали себя в specialised graphic processing programs. Функция "нерезкой маски" также помогает увеличивать резкость изображения.

Пропорциональное изменение размеров

Сохранение пропорций изображения помогает предотвращать искажение соотношения сторон.

Отключение сглаживания

Отключите сглаживание в JavaScript, чтобы сохранить максимум деталей:

ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false; // Важно для Firefox

Использование передаваемых объектов

Используйте передаваемые объекты с Web workers для ускорения работы фильтра Гермита.

Двухэтапная стратегия уменьшения размеров

Если это возможно, ограничьте уменьшение размеров до двух этапов, чтобы сохранить чёткость изображения.

Визуализация

Поддерживайте резкость и чёткость изображения при уменьшении его размера:

• Уменьшение: Уменьшайте размер поэтапно, подобно складыванию карты.
• Увеличение резкости: Прибавьте резкости, как будто надеваете очки, с помощью фильтра.
• Показ: Выведите результат в рамках холста.

Финальный результат: Детализированное уменьшенное изображение, которое сохраняет четкость оригинала.

Продвинутые стратегии уменьшения размера

Наряду с многими инструментами и библиотеками, которые помогают менять размер без потери качества:

Быстрое изменение размера с помощью CSS

CSS позволяет быстро менять размер, но для печати холст является предпочтительнее:

img.responsive {
  width: 100%;
  height: auto;
}

Постобработка с использованием метода общей вариационности

С помощью этого метода можно улучшить четкость конечного изображения.

Использование низкоуровневых алгоритмов

Для идеального качества можно применять алгоритмы, которые работают на уровне отдельных пикселей.

Полезные материалы

1. Resize image with javascript canvas (smoothly) – Stack Overflow – Обсуждение масштабирования изображений на холсте JavaScript Canvas.
2. CanvasRenderingContext2D: метод drawImage() – Web APIs | MDN – Руководство MDN по использованию метода drawImage.
3. web.dev – Платформа для изучения возможностей веба, включая работу с холстом Canvas и высоким DPI.
4. image-rendering | CSS-Tricks – CSS-Tricks – Использование свойства CSS image-rendering для изменения размеров изображений.
5. HTML Standard – Стандарт HTML, включая Canvas API.
6. Medium: How to Scale Images on the HTML5 Canvas – Методы масштабирования изображений на холсте HTML5.