javascript - 使用 javascript Canvas 调整图像大小(顺利)

Question

我正在尝试使用 Canvas 调整一些图像的大小，但我对如何平滑它们一无所知。 在 photoshop、浏览器等上。他们使用了一些算法(例如双三次、双线性)，但我不知道这些是否内置在 Canvas 中。

这是我的 fiddle :http://jsfiddle.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);

第一个是正常调整大小的图像标签，第二个是 Canvas 。请注意 Canvas 如何不那么光滑。如何实现“平滑度”？

Answer 1

您可以使用降级来获得更好的结果。大多数浏览器似乎use linear interpolation rather than bi-cubic调整图像大小时。

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

根据您调整大小的剧烈程度，如果差异较小，您可以跳过第 2 步。

在演示中，您可以看到新结果现在与图像元素非常相似。