5

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

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

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

我在这里做了一个小例子：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);

};

};

};

});
4

2 回答 2

3

您可以使用 timthumb 脚本之类的 php 基础进行扩展。所以基本的想法是使用 js 检测浏览器或 div 或任何更改或调整大小。然后触发 php 脚本来调整图像大小。script.setAttribute('src', 'remote.php?value=my message'); remote.php 你有你的 php 代码。

于 2012-11-03T13:33:07.257 回答
2

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

我看到了两种尝试解决这个问题的方法。一种方法是使用活动内容，例如 Java 小程序/Flash，或者使用实际的后端来进行缩放。即，您收到文件，将其发送到服务器，然后服务器返回按比例缩小的图像，就像大多数图像缩放站点一样。

第二种方法是尝试 HTML5 并自己实现一个缩减算法。我能做的最好的指导就是把你指向这个，这个作为起点。

对不起，如果这没有帮助。

于 2012-11-03T13:20:27.363 回答