Resolvendo problemas de suavização ao redimensionar imagens usando Canvas em JavaScript

Redimensionar imagens usando canvas em JavaScript às vezes pode resultar em bordas irregulares perceptíveis ou desfoque. Para obter redimensionamentos suaves, uma técnica conhecida como down-stepping pode ser empregada.

Na maioria dos navegadores, a interpolação linear é usada para redimensionar por padrão. A interpolação bicúbica, que produz resultados mais suaves, envolve o uso de uma vizinhança maior de pixels. No entanto, os navegadores normalmente não implementam a interpolação bicúbica diretamente.

A abordagem descendente envolve redimensionar a imagem repetidamente, cada vez usando um fator de escala menor. Isso imita o comportamento da interpolação bicúbica enquanto ainda utiliza interpolação linear no navegador subjacente.

O trecho de código a seguir demonstra como implementar a redução:

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 cria uma tela temporária, oc, e redimensiona iterativamente a imagem, eventualmente desenhando-a na tela final. Cada etapa de redimensionamento usa interpolação linear, mas ao combiná-las, o efeito geral se aproxima da interpolação bicúbica.

A propriedade imageSmoothingQuality também pode ser usada para controlar a qualidade de suavização no Chrome, fornecendo um meio mais direto de obter suavidade , mas ainda não é compatível com todos os navegadores.