圖像縮略圖

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);">