Я использую html5 элементы холста, чтобы изменить размеры изображений в моем браузере. Оказывается, качество очень низкое. Я нашел это:Отключить интерполяцию при масштабировании <canvas> но это не помогает повысить качество.

Ниже мой код CSS и JS, а также изображение, масштабированное с помощью Photoshop и масштабированное в Canvas API.

Что мне нужно сделать, чтобы получить оптимальное качество при масштабировании изображения в браузере?

Примечание. Я хочу уменьшить масштаб большого изображения до небольшого, изменить цвет на холсте и отправить результат с холста на сервер.

CSS:

canvas, img {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

JS:

var $img = $('<img>');
var $originalCanvas = $('<canvas>');
$img.load(function() {


   var originalContext = $originalCanvas[0].getContext('2d');   
   originalContext.imageSmoothingEnabled = false;
   originalContext.webkitImageSmoothingEnabled = false;
   originalContext.mozImageSmoothingEnabled = false;
   originalContext.drawImage(this, 0, 0, 379, 500);
});

Изображение изменено с помощью фотошопа:

Изображение изменено на холсте:

Редактировать:

Я попытался уменьшить масштаб в несколько шагов, как это было предложено в:

Изменение размера изображения на холсте HTML5 а такжеHtml5 canvas drawImage: как применить сглаживание

Это функция, которую я использовал:

function resizeCanvasImage(img, canvas, maxWidth, maxHeight) {
    var imgWidth = img.width, 
        imgHeight = img.height;

    var ratio = 1, ratio1 = 1, ratio2 = 1;
    ratio1 = maxWidth / imgWidth;
    ratio2 = maxHeight / imgHeight;

    // Use the smallest ratio that the image best fit into the maxWidth x maxHeight box.
    if (ratio1 < ratio2) {
        ratio = ratio1;
    }
    else {
        ratio = ratio2;
    }

    var canvasContext = canvas.getContext("2d");
    var canvasCopy = document.createElement("canvas");
    var copyContext = canvasCopy.getContext("2d");
    var canvasCopy2 = document.createElement("canvas");
    var copyContext2 = canvasCopy2.getContext("2d");
    canvasCopy.width = imgWidth;
    canvasCopy.height = imgHeight;  
    copyContext.drawImage(img, 0, 0);

    // init
    canvasCopy2.width = imgWidth;
    canvasCopy2.height = imgHeight;        
    copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);


    var rounds = 2;
    var roundRatio = ratio * rounds;
    for (var i = 1; i <= rounds; i++) {
        console.log("Step: "+i);

        // tmp
        canvasCopy.width = imgWidth * roundRatio / i;
        canvasCopy.height = imgHeight * roundRatio / i;

        copyContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvasCopy.width, canvasCopy.height);

        // copy back
        canvasCopy2.width = imgWidth * roundRatio / i;
        canvasCopy2.height = imgHeight * roundRatio / i;
        copyContext2.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvasCopy2.width, canvasCopy2.height);

    } // end for


    // copy back to canvas
    canvas.width = imgWidth * roundRatio / rounds;
    canvas.height = imgHeight * roundRatio / rounds;
    canvasContext.drawImage(canvasCopy2, 0, 0, canvasCopy2.width, canvasCopy2.height, 0, 0, canvas.width, canvas.height);


}

Вот результат, если я использую размер 2 шага вниз:

Вот результат, если я использую размер 3 шага вниз:

Вот результат, если я использую размер 4 шага вниз:

Вот результат, если я использую 20 пошаговых размеров:

Примечание. Оказывается, что от одного шага к двум шагам происходит значительное улучшение качества изображения, но чем больше шагов вы добавляете к процессу, тем более размытым становится изображение.

Есть ли способ решить проблему, заключающуюся в том, что изображение становится более размытым, чем больше шагов вы добавляете?

Редактировать 2013-10-04: Я попробовал алгоритм GameAlchemist. Вот результат по сравнению с фотошопом.

Фотошоп Изображение:

Алгоритм GameAlchemist: