Устранение проблем со сглаживанием при изменении размера изображений с использованием холста в JavaScript

Изменение размера изображений с использованием холста в JavaScript иногда может приводить к заметным неровным краям или размытию. Чтобы добиться плавного изменения размера, можно использовать метод, известный как понижение размера.

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

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

Следующий фрагмент кода демонстрирует, как реализовать понижающую интерполяцию:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

Этот код создает временный холст oc и итеративно изменяет размер изображения, в конечном итоге рисуя его на окончательном холсте. На каждом этапе изменения размера используется линейная интерполяция, но при их объединении общий эффект приближается к бикубической интерполяции.

Свойство imageSmoothingQuality также можно использовать для управления качеством сглаживания в Chrome, обеспечивая более прямой способ достижения плавности. , но он пока поддерживается не во всех браузерах.