如何从原始图像自动生成尺寸均匀的缩略图？

Question

我有来自帖子的原始图片。我现在想要创建缩略图，但由于调整大小，图像模糊。

您可以从此图片中看到示例：

我怎么能用javascript / jquery做到这一点？

感谢您的帮助。

Answer 1

如果你愿意使用CSS而不是jQuery，你可以调查background-size:cover声明。

<div style="background:url(/path/to/your/image.jpg);background-size:cover;height:200px;width:170x;"></div>

这可确保纵向和横向方向图片都符合您决定的任何尺寸div。

DEMO：http://jsfiddle.net/8V4f6/

Answer 2

根据您发布的图片，我假设您已经知道如何使用HTML或JavaScript强制缩放尺寸（例如<img width="32" height="32">，myImage.style.width="50%"等）。既然你说“图像因为调整大小而模糊”，我想你会问如何以更好的质量调整大小。

您无法控制在浏览器中完成的调整大小的质量。 （几年前，我做了一个比较，发现浏览器之间的质量存在很大差异。）

为了获得更好的质量，您唯一的选择是使用更好的算法（通常称为“重新采样”）创建单独的图像。就个人而言，我使用ImageMagic（任何平台）或IrfanView（Windows）。

使用ImageMagick：

mogrify -path MY_THUMBNAILS -thumbnail 32x32 *.jpg

为用户下载也更快。相反，如果您只是使用HTML或JavaScript，用户的浏览器仍然必须下载每个图像的完整分辨率文件，即使它在屏幕上看起来很小。

我意识到这不是你要求的答案。如果你真的必须用JavaScript做所有事情，我想你可以编写一个调整图像大小并返回缩略图的Web服务。我不认为那就是你所追求的。

Answer 3

您可以将具有较低高度和宽度属性的相同图像用作缩略图图像。

<img src="http://i.stack.imgur.com/AziqE.png" height= "10" width = "10" alt = "test image"/>