Как правильно делать превью для изображения? Допустим есть изображение 500х250, нужно сделать превью для этого изображения размером 40х40, то есть нужно уменьшить изображение и обрезать по бокам
Тумборезов как грязи. С "обрезкой по бокам" в том числе (метод fill). Но я предложил бы напрячь css, потому что автоматическое кадрирование тупое до невозможности. php create thumbnails http://phpthumb.sourceforge.net/
Метод fit. Прямоугольная тумба вписывается в квадратный контейнер фон которого может быть любым. Если кадр оригинально был квадратным он заполнит весь контейнер, иначе сверху-снизу, или слева-справа останутся поля цветом фона контейнера. Центрирование по горизонтали элементарно через text-align:center; а вертикальное предоставляет варианты. Самый на мой взгляд академический это vertical-align:middle с заданием line-height: равным высоте контейнера (и на всякий случай font-size:0) Разумеется тумба будет фиксированного размера, респонзибле дизигн потребует тумбу с картинкой в фоне, или геморроя. Ну а как вы кадрируете тумбу в квадрат если там, скажем портрет человека в рост? Останется только одно туловище, красота! Добавлено спустя 7 минут 49 секунд: Кстати, есть другой подход. С ним можете ознакомиться на гугле-имаджес. Запросите посмотреть картинки по какому-нить слову и изучите результат запроса. Гугля не париться (они вообще не парятся, ну вообще) всякими там канонами, а фигачит просто уменьшенные картинки на страницу, но, производит расчет полей между ними так, чтобы они ровненько укладывались по горизонтали. Поля бывают разные, но когда колонка выравнена типа justify, это воспринимается нормально. Может они так и выравнивают - через justify.
deblogger, Ну да, сразу видно, что с проектами по тяжелее ты не работал. Миниатюрка - это же кеш, ее желательно ужать на сколько возможно.
Ну да, сразу видно качество национального образования. Идет базар о пропорциях, внезапно Кеша кричит - ужимай! И самое интересное при чем тут вообще размер проЭкта? Мне очень интересно узнать - может быть в большом проекта тумба закачивается с высоким коэффициентом ЧСВ, а в маленьком, осознавая свою ничтожность - мгновенно. Или как все-таки влияет размер на скорость отдачи тумбы сервером? Добавлено спустя 9 минут 58 секунд: Чтобы не быть голословным объясню как оно устроено. Несколько лет я работал на пиратов и накопил изрядную либу на js по быстрому скачиванию всяких картинок с множества сайтов. Так вот, никто не генерит тумбы на лету. Во-первых потому что формат тумбы - канон (а вот у гугля как я выше показал - неканон), во-вторых это не имеет смысла и в-третьих бессмысленно грузит сервер. Даже такой монстр как imdb.com (достаточно большой проект для вас?) генерят тумбы на заднем дворе, а вот большие фотки отдают через скрипт по параметрам. Поэтому само собой подразумевалось что тумбу надо сделать и записать куда-то, а css тут при том чтобы не резать ее квадратную под канон, но оставлять в своих пропорциях, а в каноничный квадрат вписывать стилями. Если сомневаетесь что тумбы никто не генерит на переднем дворе - я вам отпощу в личку ту самую либу - сами все увидите. ЗЫ Еще в чем тут прикол - народ всячески ухитряется пряча картинки за скриптами и деревом папок, ну, чтобы по ссылке было не понятно как открыть следующую не открывая страницу со следующей ссылкой, а тумбы выкладывает так, что за 5 минут становится все ясно и понятно где взять большую, следующую и все остальные картинки пока не undefined. Diclaimer: с тех пор прошло уже много времени, может сейчас кто-то и генерит тумбы влет по запросу складывая их в кеш. Например оппонент в больших проЭктах. Типа юзер нашел пагу которую никто не добирался до него и хренакс - 10 минут ждет пока там из портянок 5000х7000 пикс сгенерятся тумбы в кеш...
Не, не, постой, ему нужно лишь сделать пропорцию фото в размерах 40х40 - квадрата. Тогда твой сервер умрет без кеша, потому, что фотки есть очень высокого качества и пока они все сразу про-грузятся порядка 50-100, может понадобится времени, а когда у тебя есть миниатюра в папке small у тебя все загрузится мгновенно и когда ты захочешь посмотреть big у нас будет загружаться только эта фотка, этим мы наоборот уменьшим нагрузку. Это все само делается. Миниатюры тоже, считай зашли на сайт в раздел конкретный и у нас сделался кешь и вывелся, в дальнейшем он уже не изменится, значит эта операция никогда не повторится и будут браться только " обработанные фото ", а при клике или другом действии мы подгрузим" оригинальное качество ". Ему нужно просто соблюдать пропорции: 1. Вертикальной картинки 2. Горизонтальной картинки Код (PHP): $width=453; $height=545; $minSizeG=300; $minSizeV=350; if($width>=$minSizeG && $width>=$height) { $height=ceil($height/($width/$minSizeG)); $width=$minSizeG; } else if($height>$width && $height>=$minSizeV) { $width=ceil($width/($height/$minSizeV)); $height=$minSizeV; } echo $width.' - '.$height; //291 - 350 После этого сделать относительно стороны квадрат и уменьшить его до 40.
Всем спасибо! rognorog меня правильно понял, я хочу создавать маленькие копии изображений в отдельную папку от оригинальных фото, и просто для наглядности выводить их в местах, где они не очень важны, а по нажатию - открывать оригинал P.S. Сделал как написал rognorog, а через CSS просто растягиваю/сжимаю, если изображение получилось не квадратное
Не псиxyй те! Щас узбагою Я понимаю что народ судит по себе, однако если я новичок в программировании, то по картинкам со мной спорить бесполезно. Я их за 15 лет зохавал состав РЖД. Вот как надо делать. Тут 2 варианта для fill и fit по опции: Код (Text): $src_w = $this->info[0]; $src_h = $this->info[1]; $max=isset($op['max'])?$op['max']:600; $dst_x=$dst_y=0; if(isset($op['crop'])) { $src_min=min($src_w,$src_h); $src_w=$src_h=$src_min; $src_x=ceil(($src_w-$src_min)/2); $src_y=ceil(($src_h-$src_min)/2); $dst_w=$dst_h=$max; $k=$dst_w/$src_w; } else { $src_x=$src_y=0; $k=min($max/$src_w,$max/$src_h); $dst_w=ceil($k*$src_w); $dst_h=ceil($k*$src_h); } if($k>1 && !isset($op['force'])) return true; То, что после else - это оно и есть, да, что ТСу надо, метод to fit. Теоретически можно кое-что посчитать сразу, еще сократить, но там всегда стоит вопрос скорости - поэтому все тупо разлагается на две части. ЗЫ перед тем как начать писать на php, я написал целую либу чудесных скриптов для ФШ, а там, сами понимаете - только картинки. Такчта если что - обращайтесь. Кстати, бонусом для GD эмпирический расчет повышения четкотухи тумбов. Он кагбе одновременно unsharp mask и surface blur. Но, блин, тонко настраивать заколебешься. За 3 этапа я настроил вот так Код (Text): $dim=sqrt($dst_w*$dst_h); switch($dim) { case($dim > 500): $q=80; $r=null; // no filter break; case($dim > 300): $q=80; $c=4.0; $r=-0.4; $o=1; break; case($dim > 200): $q=90; $c=2.0; $r=-0.25; $o=5; break; default: // < 200 $q=100; $c=1.5; $r=-0.2; $o=10; } if(!isset($op['qlt'])) $op['qlt']=$q; // sharp edges if($r) { $sharpen = array(array(0.0,$r,0.0),array($r,$c,$r),array(0.0,$r,0.0)); $divisor = array_sum(array_map('array_sum', $sharpen)); imageconvolution($this->dst_image, $sharpen, $divisor, $o); } там заодно вычисляется квалитет для жипегов, на случай если в опциях не задано. Добавлено спустя 14 минут 45 секунд: Поздно заметил Это есть имагик какой-то юзать, подойдет, иначе в GD заколебешься места аргументов считать, куда там нули вписать, куда хэ и вэ, куда макс и все такое. Тупейшая же системка. Поэтому берешь сразу все переменные объявляешь как они там перечислены и вперде Код (Text): imagecopyresampled($this->dst_image,$this->src_image,$dst_x,$dst_y,$src_x,$src_y,$dst_w,$dst_h,$src_w,$src_h); Добавлено спустя 7 минут 54 секунды: Вы о чем вообще написали? Ну не делают тумбы влет, дело не в кеше, а в том что их вообще трудно сделать. Ну как из портянки 5000 на 7000 сделать тумбу? Ну можно, но только первые юзеры будут по пол-часа ждать загрузки. Тумбы делают до того, по мере добавления, поскольку слишком бывает большая разница. Если, конечно, у вас фотки 300 на 400 - то и тумбы 200 на 200 по габаритам можно влет делать и кешировать. Зашел я на imdb теперь, как было там все через ж, так и осталось, что показательно для нас дизайнеров - дело-то не в дизайне, а в контенте. В общем вот таки у них адреса http://ia.media-imdb.com/images/M/MV5BMTQ3NTQwMjI3MV5BMl5Ba ... SY872_.jpg Последние два параметра - размер. Отдают вживую. Меняйте, смотрите что получается. Сервис очень популярный. Добавлено спустя 6 минут 10 секунд: Вот они как тумбы отдают - http://ia.media-imdb.com/images/M/MV5BMTk0MDQ3MzAzOV5BMl5Ba ... 17_AL_.jpg - они сразу уменьшенные, но еще скриптом подгоняются под дизайн. Я увеличил на 3000 пикселов в параметрах урла.