javascript - 图像缩略图

Question

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

Answer 1

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

如果是这种情况，正如Sneakyness 所暗示的那样，在客户端（在 Web 浏览器中）执行此操作是一个坏主意。如果您打算在客户端上执行此操作，您也可以这样做，<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);">

Answer 2

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

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

Answer 3

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