Как улучшить качество изображения при его загрузке в canvas?

Question

[eSelf]

Есть функция загрузки изображения.

function uploadImage(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image();
            img.src = e.target.result;
            img.onload = function() {
                drawNewImage(img);
            }
        };
        reader.readAsDataURL(input.files[0]);
    }
}

Функция отрисовки изображения в canvas:

function drawNewImage(img) {
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var canvasWidth = canvas.width;
    var canvasHeight = canvas.height;
    var minRatio = Math.min(canvasWidth / img.width, canvasHeight / img.height);
    var newImgWidth = minRatio * img.width;
    var newImgHeight = minRatio * img.height;
    var newImgX = (canvasWidth - newImgWidth) / 2;
    var newImgY = (canvasHeight - newImgHeight) / 2;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, parseInt(newImgX), parseInt(newImgY), newImgWidth, newImgHeight);
}

И сам HTML:

<canvas id="myCanvas"></canvas>
<input id="imgLoad" value="" type="file" onchange="uploadImage(this)">

Качество изображения при загрузке ужасное. Кто знает в чем может быть проблема?

Comments

[eSelf]

Вопрос решился таким образом:

function drawNewImage(img){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}

[Сергей Сергей]

а теперь надо вернуть размер канваса к первоначальному.

Answer 1

[antazy]

habrahabr.ru/post/252175