所以我发现了一些有趣的东西，在使用画布时可能会有所帮助:

要单独调整画布控件的大小，您需要使用height=""和width=""属性(或canvas.width/canvas. properties)。高度元素)。如果你使用CSS来调整画布的大小，它实际上会拉伸(即:调整大小)画布的内容以适应整个画布(而不是简单地增加或减少画布的面积)。

尝试将图像绘制到画布控件中，并将height和width属性设置为图像的大小，然后使用CSS将画布调整为您想要的大小，这是值得一试的。也许这将使用不同的调整大小算法。

还应该注意的是，canvas在不同浏览器(甚至不同浏览器的不同版本)中具有不同的效果。在浏览器中使用的算法和技术可能会随着时间的推移而改变(特别是Firefox 4和Chrome 6很快就会出来，这将非常强调画布渲染性能)。

此外，您可能也想尝试一下SVG，因为它可能也使用了不同的算法。

祝你好运!

我把@syockit的答案和降阶方法转换成了一个可重用的Angular服务，有兴趣的朋友可以访问:https://gist.github.com/fisch0920/37bac5e741eaec60e983

我包括了这两种解决方案，因为它们都有各自的优点和缺点。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
    })
})

我强烈建议你看看这个链接，并确保它被设置为真。

控制图像缩放行为 在Gecko 1.9.2 (Firefox 3.6)中引入 /雷鸟3.1 /耳廓1.0 Gecko 1.9.2引入了 mozImageSmoothingEnabled属性 canvas元素;如果这个布尔值 Value为false，图像不会为false 缩放时平滑。这个性质是 默认为True。看待plainprint ? 残雪。mozImageSmoothingEnabled = false;

为了调整图像的宽度小于原始，我使用:

    function resize2(i) {
      var cc = document.createElement("canvas");
      cc.width = i.width / 2;
      cc.height = i.height / 2;
      var ctx = cc.getContext("2d");
      ctx.drawImage(i, 0, 0, cc.width, cc.height);
      return cc;
    }
    var cc = img;
    while (cc.width > 64 * 2) {
      cc = resize2(cc);
    }
    // .. than drawImage(cc, .... )

它工作=)。

还在寻找另一个简单的解决方案吗?

var img=document.createElement('img');
img.src=canvas.toDataURL();
$(img).css("background", backgroundColor);
$(img).width(settings.width);
$(img).height(settings.height);

这个解决方案将使用浏览器的调整大小算法!：）

其中一些解决方案的问题是，它们直接访问像素数据并通过它进行循环以执行下采样。根据图像的大小，这可能会非常消耗资源，最好使用浏览器的内部算法。

drawImage()函数使用线性插值、最近邻重采样方法。当您没有将大小调整到原来大小的一半以上时，这种方法效果很好。

如果循环一次只调整最大大小的一半，结果会非常好，而且比访问像素数据快得多。

这个函数每次采样到一半，直到达到所需的大小:

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

本文致谢