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

Question

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

一切正常,除了调整大小的图像非常像素化.我目前正在拍摄本地图像文件,并从中创建数据网址.然后创建一个16 x 16的canvas元素,然后将图像绘制到画布上,并从中创建一个新的数据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);

};

};

};

});

Answer 1

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

我认为有两种方法可以解决这个问题。一种方法是使用活动内容，例如 Java 小程序/Flash 或使用实际后端来进行缩放。即，您收到文件，将其发送到服务器，然后服务器返回缩小的图像，就像大多数图像缩放网站所做的那样。

第二种方法是尝试 HTML5 并自己实现缩小算法。我能做的最好的指导就是向您指出这一点和这一点作为起点。

抱歉，如果这没有帮助。