Suavizar imágenes redimensionadas con JavaScript Canvas

Cambiar el tamaño de imágenes con HTML Canvas proporciona una manera conveniente de manipular elementos visuales dentro de una aplicación web. Sin embargo, el algoritmo de cambio de tamaño predeterminado puede dar como resultado imágenes pixeladas o irregulares, sin la suavidad que se encuentra en el software de edición de imágenes. Este problema se puede solucionar incorporando técnicas de suavizado de imágenes.

Un enfoque para lograr suavidad es reducir la escala en pasos. Este método implica cambiar el tamaño de la imagen gradualmente, utilizando incrementos más pequeños. Por ejemplo, en lugar de cambiar directamente el tamaño de la imagen original al 50%, primero puede reducirla al 75%, luego al 62,5%, y así sucesivamente. Este enfoque incremental reduce el impacto de la interpolación de píxeles, lo que produce un resultado más fluido.

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

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

Otro método es establecer la propiedad imageSmoothingQuality, que es compatible con navegadores modernos como Chrome. Esta propiedad controla el algoritmo de interpolación utilizado para cambiar el tamaño de la imagen. Al configurarlo en "alto", los navegadores pueden cambiar a un método de interpolación bicúbica más avanzado, lo que mejora la suavidad de la imagen.

canvas.getContext('2d', { imageSmoothingQuality: "high" });

Utilizar la reducción de escala en pasos o ajustar la calidad del suavizado de la imagen permite a los desarrolladores mejorar la apariencia de las imágenes redimensionadas con lienzo JavaScript, creando resultados visualmente atractivos.