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