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

Question

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

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

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

我在这里做了一个小例子:http://jsfiddle.net/5Pj8m/

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

我希望我已经解释了我正在尝试做的事情，并且它在某种程度上是可能的。谁能帮我解决这个问题？

这是代码。

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

您可以使用像 timthumb 脚本这样的 php 库来扩展。所以基本思想是使用 js 检测浏览器或 div 或任何更改或调整大小的时间。然后触发 php 脚本调整图像大小。 script.setAttribute( 'src', 'remote.php?value=my message' );远程.php你有你的 PHP 代码。