javascript - 如何从原始图像自动生成大小一致的缩略图？

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您决定的任何尺寸。

演示：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"/>