解决在 JavaScript 中使用 Canvas 调整图像大小时的平滑问题

在 JavaScript 中使用 Canvas 调整图像大小有时会导致明显的锯齿状边缘或模糊。为了实现平滑的调整大小，可以采用一种称为向下步进的技术。

在大多数浏览器中，默认情况下使用线性插值来调整大小。双三次插值可产生更平滑的结果，涉及使用更大的像素邻域。然而，浏览器通常不会直接实现双三次插值。

向下步进方法涉及重复调整图像大小，每次使用较小的比例因子。这模仿了双三次插值的行为，同时仍然在底层浏览器中使用线性插值。

以下代码片段演示了如何实现向下步进：

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 中的平滑质量，提供更直接的实现平滑的方法，但尚未在所有浏览器中支持。