我正在制作一个用于网页的JavaScript/jQuery程序，以使用户从其计算机本地打开图像文件，然后该程序将其调整为16 x 16 ICON大小和将其保存为数据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>
javaScript：
$('#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);
};
};
};
});
您可以使用像Timthumb脚本这样的PHP基础进行扩展。因此，基本思想是使用JS检测浏览器或DIV或其他更改或调整大小的何时。然后触发PHP脚本以调整图像大小。 script.setAttribute（'src'，'remote.php？value =我的消息'）;远程.php您有PHP代码。
好吧，从您的代码看来，图像缩放作业实际上是浏览器的实现，因此我认为您将在不同的浏览器中获得不同的结果。有些可能会使它平滑，有些可能不会。
我看到了尝试解决这个问题的两种方法。一种方法是使用活动内容，例如Java applet/flash或使用实际的后端进行缩放。IE。您会收到文件，将其发送到服务器，并且服务器返回缩放的图像，就像大多数图像缩放站点一样。
。第二种方法是尝试使用HTML5并自己实现下降算法。我能在那里做最好的指导就是指向您，这是一个起点。
对不起，如果没有帮助。