Html5 canvas drawImage：如何应用抗锯齿 [英] Html5 canvas drawImage: how to apply antialiasing

问题描述

请查看以下示例：

http：// jsfiddle.net/MLGr4/47/

    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,0,0,img.width,img.height,0,0,400,150);
    }
    img.src="http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg";

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

As you see, the image is not anti-aliased although it is said that drawImage applies anti aliasing automatically. I tried many different ways but it doesn't seem to work. Could you please tell me how I can get anti-aliased image? Thanks.

推荐答案

原因

Cause

Some images are just very hard to down-sample and interpolate such as this one with curves when you want to go from a large size to a small.

从信号/ DSP的角度来看，你可以看到这是一个低分辨率的图像，如果信号中有许多高频率（细节），则可能会导致混叠。

From a signal/DSP perspective you could see this as a low-pass filter's threshold value set too high, which may result in aliasing if there are many high frequencies (details) in the signal.

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

The solution is to use step-down to get a proper result. Step-down means you reduce the size in steps to allow the limited interpolation range to cover enough pixels for sampling.

这将允许使用双线性插值它实际上的行为非常像双立方体，当这样做）和开销是最小的，因为有更少的像素采样在每一步。

This will allow good results also with bi-linear interpolation (it actually behaves much like bi-cubic when doing this) and the overhead is minimal as there are less pixels to sample in each step.

理想的步骤是去

The ideal step is to go to half the resolution in each step until you would set the target size (thanks to Joe Mabel for mentioning this!).

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

使用下拉菜单如下所示：

在这种情况下，您需要按照以下3个步骤进行操作：

In this case you will need to step down in 3 steps:

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

In step 1 we reduce the image to half by using an off-screen canvas:

/// 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, 0, 0, oc.width, oc.height);

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

Step 2 reuses the off-screen canvas and draws the image reduced to half again:

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

我们再次绘制主画布，再次将减少到一半到最终大小：

And we draw once more to main canvas, again reduced to half but to the final size:

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

提示：

需要的步数，使用这个公式（它包括设置目标大小的最后一步）：

Tip:

You can calculate total number of steps needed, using this formula (it includes the final step to set target size):

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

这篇关于Html5 canvas drawImage：如何应用抗锯齿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！