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

Question

我正在尝试用画布调整一些图像的大小，但我不知道如何平滑它们。在photoshop,浏览器等。有几个算法他们使用（例如双三次，双线性），但我不知道这些是不是内置到画布。

这是我的小提琴：http://jsfidle.net/ewupt/

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

第一个是正常的调整大小的图像标签，第二个是画布。注意画布是如何不是平滑的。我怎样才能实现‘平滑’呢？

Answer 1

你可以使用下步来达到更好的效果。大多数浏览器在调整图像大小时似乎使用线性插值而不是双立方插值。

（更新后的规范中添加了质量属性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>