Image Thumbnails

Question

Можно ли создавать эскизы изображения из области просмотра, разрезающей их? Возможно с JQuery! Как в этом примере, но без использования элемента canvs. Galleria делает что-то подобное, но довольно медленно загружать все изображения в кеш и затем изменять их размер. Я использую предварительный загрузчик, но я не знаю, как изменить размеры изображений, так как мне нужны все миниатюры размером 50X50. Заранее благодарим за помощь!

Answer 1

Theres изображение обрезки plugin в наличии. Не совсем уверен, что вы имеете в виду.

Answer 2

Любое большое количество генерации миниатюр должно быть действительно сделано до того, как пользователь когда-либо посещает страницу. Вы бы сэкономили больше времени, проработав их через генератор эскизов заранее и просто используя файлы.

Я исхожу из предположения, что, поскольку они 50x50, их будет много.

Answer 3

Тот факт, что вы упоминаете jQuery, подразумевает, что вы хотите создать эскиз в качестве части веб-страницы?

Если это так, как Sneakyness implied, это плохая идея сделать это на клиенте (в веб-браузере). Если вы планируете делать это на клиенте, вы также можете сделать <img src="/images/really_large_file.jpg" border="0" height="50" width="50">, потому что для создания эскизов на клиенте (в веб-браузере) посетитель должен будет загрузить полную версию каждого изображения, которое вы хотите увеличить. Если эти изображения большие, это будет очень медленно. Даже 100 изображений размером 10 КБ - 1 МБ изображений. Для модемного набора им потребуется около 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);">