Html5 canvas drawImage：如何应用抗锯齿

请看看下面的例子：

var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    img=new Image();
    img.onload=function(){
        canvas.width=400;
        canvas.height=150;
        ctx.drawImage(img,img.width,img.height,400,150);
    }
    img.src="http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

正如你所看到的，图像不是反锯齿，虽然据说drawImage自动应用反锯齿。我尝试了许多不同的方式，但它似乎不工作。你能告诉我怎么才能得到反锯齿的图像？
谢谢。

解决方法

原因

一些图像只是很难下采样和内插，如这个有曲线，当你想从一个大的大小。

浏览器通常使用canvas元素的双线性(2×2采样)内插，而不是bi-cubic(4×4采样)的(可能)性能原因。

如果步长太大，那么简单地没有足够的像素来从其中反映在结果中。

从信号/ DSP的角度来看，你可以看到这是一个低通滤波器的阈值设置得太高，如果信号中有很多高频(细节)，可能会导致混叠。

解

解决方案是使用降压以获得正确的结果。降低意味着您逐步减小大小，以允许有限的插值范围覆盖足够的像素进行采样。

这将允许良好的结果，也与双线性插值(它的行为非常像双立方体，当这样做)和开销是最小的，因为在每个步骤中有更少的像素采样。

理想的步骤是在每个步骤中达到一半的分辨率，直到设置目标大小(感谢Joe Mabel提及这个！)。

MODIFIED FIDDLE

使用原始问题中的直接缩放：

使用降压如下图所示：

在这种情况下，您需要分三步：

在步骤1中，我们通过使用离屏画布将图像缩小为一半：

/// step 1 - create off-screen canvas
var oc   = document.createElement('canvas'),octx = oc.getContext('2d');

oc.width  = img.width  * 0.5;
oc.height = img.height * 0.5;

octx.drawImage(img,oc.width,oc.height);

步骤2重新使用离屏画布，并将图像再次缩小到一半：

/// step 2
octx.drawImage(oc,oc.width * 0.5,oc.height * 0.5);

我们再次画到主画布，再次减少到一半，但到最终尺寸：

/// step 3
ctx.drawImage(oc,oc.height * 0.5,canvas.width,canvas.height);

小费：

您可以使用此公式计算所需的步骤总数(包括设置目标尺寸的最后一步)：

steps = Math.ceil(Math.log(sourceWidth / targetWidth) / Math.log(2))

Html5 canvas drawImage：如何应用抗锯齿

解决方法

相关文章