图像缩略图

Question

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

Answer 1

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

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

Answer 2

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

如果是这种情况，正如暗示的偷偷摸摸那样，在客户端上执行此操作是一个坏主意（在网络浏览器中）。 如果您打算在客户端上执行此操作，您也可以执行 因为在客户端（在网络浏览器中）生成缩略图将要求访问者下载您想要缩略图的每个图像的完整版本。 如果这些图像很大，速度会非常慢。 即使 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);">

Answer 3

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