Resolver problemas de suavizado al cambiar el tamaño de imágenes usando Canvas en JavaScript

Cambiar el tamaño de imágenes usando Canvas en JavaScript a veces puede resultar en bordes irregulares o borrosos notables. Para lograr cambios de tamaño fluidos, se puede emplear una técnica conocida como reducción de tamaño.

En la mayoría de los navegadores, la interpolación lineal se utiliza para cambiar el tamaño de forma predeterminada. La interpolación bicúbica, que produce resultados más suaves, implica el uso de una vecindad más grande de píxeles. Sin embargo, los navegadores normalmente no implementan la interpolación bicúbica directamente.

El enfoque de reducción implica cambiar el tamaño de la imagen repetidamente, cada vez usando un factor de escala más pequeño. Esto imita el comportamiento de la interpolación bicúbica y al mismo tiempo utiliza la interpolación lineal en el navegador subyacente.

El siguiente fragmento de código demuestra cómo implementar la reducción gradual:

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";

Este código crea un lienzo temporal, oc, y cambia el tamaño de la imagen de forma iterativa, dibujándola eventualmente en el lienzo final. Cada paso de cambio de tamaño utiliza interpolación lineal, pero al combinarlos, el efecto general se aproxima a la interpolación bicúbica.

La propiedad imageSmoothingQuality también se puede utilizar para controlar la calidad del suavizado en Chrome, lo que proporciona un medio más directo para lograr suavidad. , pero aún no es compatible con todos los navegadores.