HTML 5画布图像：如何应用抗混叠

Question

HTML 5画布图像：如何应用抗混叠请查看以下示例：http://jsfiddle.net/MLGr4/47/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

我强烈推荐皮卡为这样的任务。它的质量优于多次缩编，同时速度也相当快。这里有一个演示.

Answer 2

  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,/, "");}