画布图像调整大小和裁切噪点

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

就正确处理而言，画布效果很好。 不幸的是，有时程序员需要深入研究才能找到解决问题的方法。

我的解决方案实际上来自另一篇文章： HTML5 canvas drawImage：如何应用抗锯齿

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

如果使用canvas和drawimage碰巧会出现粗糙的裁剪结果，则上面的链接是解决该问题的众多解决方案之一。