Как изменить размер изображения с помощью JavaScript/jQuery без пикселизации, как это делает браузер?

Я делаю программу javascript/jquery для веб-страницы, чтобы пользователь мог открыть файл изображения локально со своего компьютера, а затем программа изменяет его размер до размера значка 16 x 16 и сохраняет его как URL-адрес данных.

Все работает нормально, за исключением того, что изображение с измененным размером очень пикселизировано. В настоящее время я беру локальный файл изображения и делаю из него URL-адрес данных. Затем создайте элемент холста размером 16 x 16, а затем нарисуйте изображение на холсте и создайте из него новый URL-адрес данных.

Я хотел бы сделать это по-другому, так как изображение с новым размером очень пикселизированное, негладкое и не кажется сглаженным. Когда браузер отображает исходное изображение с атрибутами ширины и высоты, установленными на 16, оно выглядит очень красиво и плавно. Это то, чего я хотел бы. Я не понимаю, как получить тот же результат, который отображается, когда это делает браузер. Я использую Google Chrome.

Я сделал небольшой пример здесь: http://jsfiddle.net/5Pj8m/

В примере я использовал логотип jsFiddle, хотя вы можете протестировать его с любым локальным файлом и посмотреть результаты. Возможно, этот код может помочь кому-то узнать, как это сделать, но все же я думаю, что полученное изображение с измененным размером может или должно выглядеть намного лучше!

Надеюсь, я объяснил, что я пытаюсь сделать, и что это каким-то образом возможно. Может ли кто-нибудь помочь мне или понять это?

Вот код.

HTML:

<input type='file' id='inputFile'>
<table border=1><tr><td>
<span id='spanDisplayOrigFull'>OrigFull:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png>
</span>
</td><td>
<span id='spanDisplayOrigIcon'>OrigIcon:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png width='16' height='16'>
</span>
</td></tr><tr><td>
<span id='spanDisplayNewFull'>NewFull: </span>
</td><td>
<span id='spanDisplayNewIcon'>NewIcon: </span>
</td></tr></table>

ЯВАСКРИПТ:

$('#inputFile').bind('change', function()
{

var file = inputFile.files[0];

var reader = new FileReader();
reader.readAsDataURL(file);

reader.onload = function()
{

var imageUrlFull = reader.result;

var imageLocalFull = new Image();
imageLocalFull.src = imageUrlFull;
imageLocalFull.id = 'imageLocalFull';

imageLocalFull.onload = function()
{

var canvas = document.createElement('canvas');
canvas.width = 16; canvas.height = 16;

var context = canvas.getContext('2d');
context.drawImage(imageLocalFull, 0, 0, 16, 16);

var imageUrlIcon = canvas.toDataURL(file.type);

var imageLocalIcon = new Image();
imageLocalIcon.src = imageUrlIcon;
imageLocalIcon.id = 'imageLocalIcon';

imageLocalIcon.onload = function()
{

spanDisplayNewFull.appendChild(imageLocalFull);
spanDisplayNewIcon.appendChild(imageLocalIcon);

};

};

};

});