使用javascript画布调整图像大小（平滑）

Z时代
2024-01-10
分类：问答

我正在尝试使用画布调整某些图像的大小，但是我对如何使其平滑一无所知。在Photoshop，浏览器等上。它们使用一些算法（例如双三次，双线性），但我不知道这些算法是否内置在画布中。

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

第一个是正常尺寸调整后的图片标签，第二个是画布。请注意，画布如何不那么光滑。如何获得“顺滑度”？

回答：

您可以使用降级以获得更好的结果。调整图像大小时，大多数浏览器似乎使用线性插值而不是双三次插值。

（

在规范中添加了品质属性，该属性imageSmoothingQuality当前仅在Chrome中可用。）

除非没有选择平滑或最接近的邻居，否则浏览器将始终在缩小图像后对图像进行插值，因为此功能用作低通滤波器以避免混叠。

双线性使用2x2像素进行插值，而双三次使用4x4进行插值，因此，通过逐步执行此操作，可以在使用双线性插值时接近双三次结果，如在所得图像中看到的那样。

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";
<img src="//i.imgur.com/SHo6Fub.jpg" width="300" height="234">
<canvas id="canvas" width=300></canvas>