如何使用 HTML Canvas 实现平滑调整大小的图像？

使用 Canvas 平滑图像

使用 HTML canvas 调整图像大小是一项常见任务，但实现平滑可能是一项挑战。虽然 Photoshop 等图像编辑软件提供了各种插值算法，例如双三次和双线性，但尚不清楚 canvas 是否支持这些选项。

<code class="js">var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 234;
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);</code>

上面的代码片段使用 canvas 调整图像大小，但调整后的图像缺乏平滑度。

为了解决这个问题，可以采用降步的概念。浏览器通常使用线性插值来调整大小，这可能会导致锯齿。通过将缩小过程分解为多个步骤，可以获得更接近双三次插值的结果。

考虑以下修改后的代码：

<code class="js">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";</code>

此代码执行多个调整大小步骤接下来，逐渐减小图像尺寸并应用插值。结果是图像边缘更平滑，视觉质量得到改善。

以上是如何使用 HTML Canvas 实现平滑调整大小的图像？的详细内容。更多信息请关注PHP中文网其他相关文章！