画布图像调整大小并裁剪噪音

Question

我正在尝试使用canvas和drawImage裁剪图像时修复问题。 我浏览过互联网上的所有文章，找不到简单的答案或帮助。

该脚本实际上有效，但裁剪后的图像充满了噪音。我将非常感谢您的帮助和想法，以便解决这个问题。

当我使用这些功能时，我正在使用firefox（27.0.1）。

$(document).ready(function() {
    var width = 80, height = 80;
    var ctx = document.getElementById('canvas').getContext('2d'),
       img = new Image,
       w = 200,
       h = 200,
       x = 800,
       y = 100; 
    img.src = $('#image2').attr('src');

    ctx.drawImage(img, x, y, w, h, 0, 0, width, height);
});

它是如何看待作物的小提琴示例：

http://jsfiddle.net/LUU28/

我如何看待它的例子（以及我希望它如何看）以及它如何变为：

Answer 1

Canvas工作得很好，只要处理得当。不幸的是，程序员有时需要深入寻找解决问题的方法。

我的解决方案实际上来自另一篇文章： Html5 canvas drawImage: how to apply antialiasing

我遇到的问题是，当使用画布将图像从非常好的质量裁剪到非常小的尺寸时，如果不进行处理则最终裁剪缺少任何抗锯齿处理。

如果你碰巧使用画布和drawimage有粗糙的裁剪结果，上面的链接是问题的许多解决方案之一。