图像缩略图答案

【问题标题】：Image Thumbnails图像缩略图
【发布时间】：2010-11-13 01:15:47
【问题描述】：

可以从视口中的图像切片生成缩略图吗？可能与Jquery！就像在这个例子中一样，但没有使用 canvs 元素。 Galleria 做了类似的事情，但是加载缓存中的所有图片然后调整它们的大小非常慢。我正在使用预加载器，但我不知道如何调整图片大小，因为我需要所有缩略图为 50X50。提前感谢您的帮助！

【问题讨论】：

您不妨将这个问题命名为“Blah blah”
如果您要求创建图像缩略图的实用程序，请尝试在 Superuser.com 上询问。如有必要，请 Google 获取测试版密钥。

标签： javascript jquery thumbnails

【解决方案1】：

任何大量的缩略图生成都应该在用户访问页面之前完成。您可以通过缩略图生成器预先运行它们并仅使用文件来节省更多时间。

我不假设因为它们是 50x50，所以会有很多。

【讨论】：

【解决方案2】：

您提到 jQuery 的事实意味着您希望将缩略图生成作为网页的一部分？

如果是这种情况，作为Sneakyness implied，在客户端（在网络浏览器中）执行此操作是个坏主意。如果您打算在客户端上执行此操作，您不妨这样做<img src="/images/really_large_file.jpg" border="0" height="50" width="50">，因为在客户端（在 Web 浏览器中）生成缩略图将需要访问者下载您想要缩略图的每个图像的完整版本。如果这些图像很大，这将非常慢。即使是 100 张 10KB 的图像，也是 1MB 的图像。通过拨号调制解调器，下载大约需要 4 分钟。

缩略图应在服务器上预先生成（上传时）或动态生成（访问者请求时）。

如果您仍然想这样做（不推荐），您可以这样做：

<script type="text/javascript">
function maintainAspectRatio(img) {
    // retrieve a new copy of the image that is not sized 50 x 50
    var newImg = new Image();
    newImg.src = img.src;
    // get the ratio of the width to the height
    var ratio = newImg.width / newImg.height;
    if (ratio > 1) {
        // ratio is >1, preserve width 50, scale height
        img.width = 50;
        img.height = 50 / ratio;
    } else if (ratio < 1) {
        // ratio is <1, preserve height 50, scale width
        img.width = ratio * 50;
        img.height = 50;
    }
}
</script>
<!--
load image as 50 x 50 "thumbnail" to reserve screen space
this will most likely result in the aspect ratio being corrupted
we will use JavaScript to fix this
-->
<img src="http://www.google.com/intl/en_us/images/logo.gif"
    border="0" height="50" width="50"
    onload="maintainAspectRatio(this);">

【讨论】：

【解决方案3】：

有一个图像裁剪plugin 可用。不完全确定你的意思。

【讨论】：