如何使用JavaScript/jQuery调整图像大小，而不像浏览器那样进行像素化？

我正在为网页制作一个javascript/jquery程序，让用户从他们的计算机本地打开一个图像文件，然后该程序将其大小调整为16 x 16图标大小，并将其保存为数据url

一切都很好，除了调整大小的图像是非常像素化的。我目前正在获取本地图像文件，并从中创建一个数据url。然后创建一个16x16画布元素，然后将图像绘制到画布上，并从中创建一个新的数据url

我想用一些不同的方法来做这件事，因为新调整大小的图像是非常像素化和不平滑的，并且看起来没有抗锯齿。当浏览器显示“宽度”和“高度”属性设置为16的原始图像时，它看起来非常漂亮且平滑。这就是我想要的。我不明白如何得到与浏览器显示的结果相同的结果。我正在使用谷歌浏览器

我在这里举了一个小例子：

在本例中，我使用了JSFIDLE徽标，尽管您可以使用任何本地文件对其进行测试，并查看结果。也许这段代码可以帮助其他人学习如何做，但我仍然认为，结果调整图像大小可以或应该看起来更好

我希望我已经解释了我想做的事情，并且这是可能的。有人能帮我解决这个问题吗

这是代码

HTML:

---

好的，从你的代码来看，图像缩放工作实际上是留给你的浏览器实现的，所以我认为不同的浏览器会有不同的结果。有些人可能会平复，有些人可能不会

我认为有两种方法可以解决这个问题。一种方法是使用活动内容，如Javaapplet/Flash，或者使用实际的后端进行缩放。也就是说，您收到文件后，将其发送到服务器，服务器返回缩小的图像，就像大多数图像缩放站点一样

第二种方法是尝试HTML5并自己实现一个向下扩展的算法。我在那里所能做的最好的指导就是把你作为一个起点

---

如果没有帮助，很抱歉。

您可以使用类似timthumb的php脚本来扩展。 因此，基本思想是在浏览器或div或任何更改或调整大小时使用js检测。然后触发php脚本以调整图像大小。 setAttribute（'src'，'remote.php？value=my message'）； remote.php

---

你有你的php代码。

有

上下文。webkitImageSmoothing

，但它似乎只会在绘制更大尺寸的图像时影响平滑。当绘制较小尺寸的图像时，它没有效果。您可能需要在上提交功能请求。

<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);

};

};

};

});