Повторная выборка путем уменьшения масштаба снижает качество изображения?

Цель здесь — уменьшить размер изображения, сохранив при этом его качество в среде браузера. Проблема возникает при уменьшении изображения с использованием холста HTML5, что приводит к ухудшению качества изображения.

Уменьшение масштаба и интерполяция

Уменьшение масштаба и интерполяция — это разные методы. Уменьшение масштаба означает уменьшение размеров изображения путем объединения пикселей исходного изображения для создания меньшего количества пикселей в целевом изображении, а интерполяция — это создание новых пикселей в целевом изображении при увеличении масштаба. В контексте уменьшения масштаба интерполяция не имеет значения.

Pixel Perfect Downscaling

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

Решение: алгоритм пиксельного уменьшения масштаба

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

Детали реализации

Приведенный код JavaScript предлагает идеальный алгоритм уменьшения масштаба до пикселя. Он создает массив float32 для хранения промежуточных значений пикселей, размер которых в три раза превышает размер целевого изображения. Для больших изображений это может потребовать много памяти.

Ограничения

Хотя этот алгоритм обеспечивает высококачественное уменьшение масштаба, обработка больших изображений может быть медленной из-за использования функций getImageData и putImageData.

Дополнительные соображения

Для изображений меньшего размера уменьшение масштаба можно выполнять несколько раз с использованием встроенных механизмов масштабирования HTML5 Canvas, поскольку они оптимизируются для небольших изображений. Для изображений большего размера рассмотрите возможность уменьшения масштаба другими методами, такими как CSS или WebGL.