使用 JavaScript Canvas 平滑调整大小的图像

使用 HTML canvas 调整图像大小提供了一种在 Web 应用程序中操作视觉效果的便捷方法。然而，默认的调整大小算法可能会导致图像像素化或锯齿状，缺乏图像编辑软件中的平滑度。这个问题可以通过结合图像平滑技术来解决。

实现平滑的一种方法是逐步缩小尺寸。此方法涉及使用较小的增量逐渐调整图像大小。例如，您可以先将原始图像大小缩小到 75%，然后缩小到 62.5%，以此类推，而不是直接将原始图像大小调整为 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);

// ...

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

另一种方法是设置 imageSmoothingQuality 属性，Chrome 等现代浏览器都支持该属性。该属性控制用于调整图像大小的插值算法。通过将其设置为“high”，浏览器可以切换到更高级的双三次插值方法，从而提高图像平滑度。

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

通过逐步缩小尺寸或调整图像平滑质量，开发人员可以使用 JavaScript 画布增强调整大小的图像的外观，从而创建具有视觉吸引力的结果。