javascript - Canvas 图像调整大小和裁剪噪点

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

关于裁剪后外观的 fiddle 示例:

http://jsfiddle.net/LUU28/

我如何看待它(以及我希望它看起来如何)以及它之后的样子的示例:

Answer 1

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

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

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

如果您碰巧使用 Canvas 和绘图图像得到了粗糙的裁剪结果，上面的链接是解决该问题的众多解决方案之一。