Question

请看下面的例子：

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会自动应用抗锯齿，但图像并未消除锯齿。我尝试了很多不同的方法，但似乎没有用。你能告诉我如何获得抗锯齿图像吗？感谢。

Answer 1

原因

当您想要从大尺寸变为小尺寸时，有些图像很难进行下采样和插值，例如带有曲线的。

由于（可能）性能原因，浏览器通常使用双向线性（2x2采样）插值与canvas元素而不是双三次（4x4采样）。

如果步骤太大，那么根本没有足够的像素可以从结果中反映出来。

从信号/ DSP的角度来看，您可以将此视为低通滤波器的阈值设置得太高，如果信号中有很多高频（细节），可能会导致混叠。

解决方案

更新2018年：

这是一个巧妙的技巧，可以用于支持2D上下文中filter属性的浏览器。这预先模糊了与重新采样基本相同的图像，然后缩小。这允许大步骤，但只需要两步和两次抽签。

使用步数（原始大小/目标大小/ 2）作为半径进行预模糊（您可能需要根据浏览器和奇数/偶数步骤进行启发式调整 - 此处仅显示简化）：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

if (typeof ctx.filter === "undefined") {
 alert("Sorry, the browser doesn't support Context2D filters.")
}

const img = new Image;
img.onload = function() {

  // step 1
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  oc.width = this.width;
  oc.height = this.height;

  // steo 2: pre-filter image using steps as radius
  const steps = (oc.width / canvas.width)>>1;
  octx.filter = `blur(${steps}px)`;
  octx.drawImage(this, 0, 0);

  // step 3, draw scaled
  ctx.drawImage(oc, 0, 0, oc.width, oc.height, 0, 0, canvas.width, canvas.height);

}
img.src = "//i.stack.imgur.com/cYfuM.jpg";

body{ background-color: ivory; }
canvas{border:1px solid red;}

<br/><p>Original was 1600x1200, reduced to 400x300 canvas</p><br/>
<canvas id="canvas" width=400 height=250></canvas>

支持过滤器为ogf Oct / 2018：

CanvasRenderingContext2D.filter                                                   
api.CanvasRenderingContext2D.filter                                               
On Standard Track, Experimental                                                   
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/filter        
                                                                                  
DESKTOP >        |Chrome    |Edge      |Firefox   |IE        |Opera     |Safari   
:----------------|:--------:|:--------:|:--------:|:--------:|:--------:|:--------
filter !         |    52    |    ?     |    49    |    -     |    -     |    -    
                                                                                  
MOBILE >         |Chrome/A  |Edge/mob  |Firefox/A |Opera/A   |Safari/iOS|Webview/A
:----------------|:--------:|:--------:|:--------:|:--------:|:--------:|:--------
filter !         |    52    |    ?     |    49    |    -     |    -     |    52   
                                                                                  
! = Experimental                                                                  
                                                                                  
Data from MDN - "npm i -g mdncomp" (c) epistemex

2017年更新：规范中定义的new property用于设置重新采样质量：

context.imageSmoothingQuality = "low|medium|high"

目前仅支持Chrome。每个级别使用的实际方法由供应商决定，但是将Lanczos视为“高”或质量等同的是合理的。这意味着可以完全跳过降压，或者可以使用更大的步骤，重绘次数更少，具体取决于图像大小和

支持imageSmoothingQuality：

CanvasRenderingContext2D.imageSmoothingQuality
api.CanvasRenderingContext2D.imageSmoothingQuality
On Standard Track, Experimental
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality

DESKTOP >              |Chrome    |Edge      |Firefox   |IE        |Opera     |Safari
:----------------------|:--------:|:--------:|:--------:|:--------:|:--------:|:--------:
imageSmoothingQuality !|    54    |    ?     |    -     |    ?     |    41    |    Y

MOBILE >               |Chrome/A  |Edge/mob  |Firefox/A |Opera/A   |Safari/iOS|Webview/A
:----------------------|:--------:|:--------:|:--------:|:--------:|:--------:|:--------:
imageSmoothingQuality !|    54    |    ?     |    -     |    41    |    Y     |    54

! = Experimental

Data from MDN - "npm i -g mdncomp" (c) epistemex

浏览器。在那之前......：
传输结束

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

这也可以通过双线性插值获得良好的结果（实际上，这样做时就像双立方体一样）并且开销很小，因为在每一步中采样的像素较少。

理想的一步是在每个步骤中转到分辨率的一半，直到你设定目标尺寸（感谢Joe Mabel提到这个！）。

<强> Modified fiddle

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

NORMAL DOWN-SCALED IMAGE

使用降压功能，如下所示：

DOWN-STEPPED IMAGE

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

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

第2步重复使用屏幕外画布，再将图像缩小为一半：

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

然后我们再次画到主帆布上，再次将~~缩小到一半~~，但最终尺寸为：

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

提示：

您可以使用此公式计算所需的总步数（包括设置目标大小的最后一步）：

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

Answer 2

I highly recommend pica for such tasks. Its quality is superior to multiple downsizing and is quite speedy at the same time. Here is a demo.

Answer 3

    var getBase64Image = function(img, quality) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");

    //----- origin draw ---
    ctx.drawImage(img, 0, 0, img.width, img.height);

    //------ reduced draw ---
    var canvas2 = document.createElement("canvas");
    canvas2.width = img.width * quality;
    canvas2.height = img.height * quality;
    var ctx2 = canvas2.getContext("2d");
    ctx2.drawImage(canvas, 0, 0, img.width * quality, img.height * quality);

    // -- back from reduced draw ---
    ctx.drawImage(canvas2, 0, 0, img.width, img.height);

    var dataURL = canvas.toDataURL("image/png");
    return dataURL;
    // return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Answer 4

除了Ken的回答之外，还有另一种解决方案，可以在两半中执行下采样（因此使用浏览器的算法，结果看起来很好）：

  function resize_image( src, dst, type, quality ) {
     var tmp = new Image(),
         canvas, context, cW, cH;

     type = type || 'image/jpeg';
     quality = quality || 0.92;

     cW = src.naturalWidth;
     cH = src.naturalHeight;

     tmp.src = src.src;
     tmp.onload = function() {

        canvas = document.createElement( 'canvas' );

        cW /= 2;
        cH /= 2;

        if ( cW < src.width ) cW = src.width;
        if ( cH < src.height ) cH = src.height;

        canvas.width = cW;
        canvas.height = cH;
        context = canvas.getContext( '2d' );
        context.drawImage( tmp, 0, 0, cW, cH );

        dst.src = canvas.toDataURL( type, quality );

        if ( cW <= src.width || cH <= src.height )
           return;

        tmp.src = dst.src;
     }

  }
  // The images sent as parameters can be in the DOM or be image objects
  resize_image( $( '#original' )[0], $( '#smaller' )[0] );

致this post

的信用

Answer 5

我创建了一个可重复使用的Angular服务，以便为感兴趣的人处理高质量的图像大小调整：https://gist.github.com/fisch0920/37bac5e741eaec60e983

该服务包括Ken的逐步降尺度方法以及here发现的lanczos卷积方法的修改版本。

我包含了两种解决方案，因为它们都有自己的优点/缺点。 lanczos卷积方法质量较高，代价是较慢，而逐步降尺度方法产生合理的抗锯齿结果，并且速度明显更快。

使用示例：

angular.module('demo').controller('ExampleCtrl', function (imageService) {
  // EXAMPLE USAGE
  // NOTE: it's bad practice to access the DOM inside a controller, 
  // but this is just to show the example usage.

  // resize by lanczos-sinc filter
  imageService.resize($('#myimg')[0], 256, 256)
    .then(function (resizedImage) {
      // do something with resized image
    })

  // resize by stepping down image size in increments of 2x
  imageService.resizeStep($('#myimg')[0], 256, 256)
    .then(function (resizedImage) {
      // do something with resized image
    })
})

Answer 6

如果其他人仍然在寻找答案，还有另一种方法可以使用背景图像而不是drawImage（）。你不会以这种方式失去任何图像质量。

JS：

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
   var url = "http://openwalls.com/image/17342/colored_lines_on_blue_background_1920x1200.jpg";

    img=new Image();
    img.onload=function(){

        canvas.style.backgroundImage = "url(\'" + url + "\')"

    }
    img.src="http://openwalls.com/image/17342/colored_lines_on_blue_background_1920x1200.jpg";

working demo

Html5 canvas drawImage：如何应用抗锯齿

6 个答案:

原因

解决方案

提示：