图像缩略图

Question

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

Answer 1

Theres an image cropping plugin available。不完全确定你的意思。

Answer 2

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

我假设因为他们是50x50，他们会有很多。

Answer 3

你提到jQuery的事实意味着你想做缩略图生成作为网页的一部分？

如果是这种情况，则作为Sneakyness implied，在客户端（在Web浏览器中）执行此操作是一个坏主意。如果您计划在客户端执行此操作，那么最好不要使用<img src="/images/really_large_file.jpg" border="0" height="50" width="50">，因为在客户端（在Web浏览器中）生成缩略图将要求访问者下载您想缩略图的每个图像的完整版本。如果这些图像很大，这将非常缓慢。即使每个10KB的100张图像也是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);">