Комментарии 57
Я попробовала на некоторых сайтах генерировать превьюшки без обрезания и искажения пропорций, и располагать и не в ряд, а «плавающими». А пользователи при создании галереи могут передвигать их вправо-влево, получая не обязательно «строгие» ряды. Иногда такой способ позволяет добиться лучших результатов.
На эту мысль меня навела покупка «нестандартного» бумажного фотоальбома, в котором на каждой странице можно было разместить 2 вертикальных и 3 горизонтальных фотографии.
На эту мысль меня навела покупка «нестандартного» бумажного фотоальбома, в котором на каждой странице можно было разместить 2 вертикальных и 3 горизонтальных фотографии.
К сожалению, такой способ мало применим при резиновой верстке. Плавающие картинки могут очень по разному располагаться при разной ширине окна.
Не спорю. Потому и написала — «иногда».
есть jQuery плагин Masonry, который распологает блоки наиболее компактно. думаю, он мог бы помочь.
Вот старое, доброе решение:
This PHP script uploads files and manipulates images very easily. The perfect script to generate thumbnails or create a photo gallery! It can convert, resize and work on uploaded images in many ways, add labels, watermarks and reflections and other image editing features. You can use it for files uploaded through an HTML form, a Flash uploader, or on local files. It uses the GD library.
This PHP script uploads files and manipulates images very easily. The perfect script to generate thumbnails or create a photo gallery! It can convert, resize and work on uploaded images in many ways, add labels, watermarks and reflections and other image editing features. You can use it for files uploaded through an HTML form, a Flash uploader, or on local files. It uses the GD library.
Как вариант можно использовать вот это. Да, не спорю может установка и создание самой превьюшки займет не много больше времени — зато ты точно знаешь как эта самая превьюшка будет выглядеть
я в джанге использую уже давно — code.google.com/p/sorl-thumbnail/, только его поддерживать перестали походу, (((( а очень нужно продолжение.
ого, какой у вас тут жесткач оказывается
у нас в Друпале все решается при помощи ImageCache + ImageCache_Actions и пяти кликов
всем удачи ;)
у нас в Друпале все решается при помощи ImageCache + ImageCache_Actions и пяти кликов
всем удачи ;)
Для Drupal есть отличный модуль Image Resize Filter. Он как раз позволяет справится с проблемой номер 1.
Вставляем картинку через WYSIWYG. Задаем ее размеры (пропорционально тягая за границы) и модуль автоматически создаст миниатюру нужного размера. Таким образом, даже если пользователь админки загрузит картинку очень большого размера — в итоге получим уменьшенную миниатюру нужного размера.
Вставляем картинку через WYSIWYG. Задаем ее размеры (пропорционально тягая за границы) и модуль автоматически создаст миниатюру нужного размера. Таким образом, даже если пользователь админки загрузит картинку очень большого размера — в итоге получим уменьшенную миниатюру нужного размера.
Предложил бы еще один вариант организации галереи, вариации на тему технологий Филипс:
Набросал на скорую руку из первых попавшихся картинок. Мне кажется алгоритм создания вполне можно автоматизировать на сервере, хотя могу и ошибаться — я не программист.
Набросал на скорую руку из первых попавшихся картинок. Мне кажется алгоритм создания вполне можно автоматизировать на сервере, хотя могу и ошибаться — я не программист.
класс! только переход жестковат
Это хороший интересный способ. Надо взять на вооружение.
Идея отличная!
А полчаса курения доки по ImageMagick позволят реализовать ее для всех вариантов, описываемых автором поста.
А полчаса курения доки по ImageMagick позволят реализовать ее для всех вариантов, описываемых автором поста.
Простейший рабочий вариант с использованием Imagick. Фон масштабирует точно по нужному размеру. Изображение вписывает в фон минус 10% пропорционально. Размытие 10px.
Исходное изображение
Результат
<?
function RenderImage($src_file, $dest_file, $width = '160', $height = '160')
{
$fon = new Imagick($src_file);
$fon -> resizeImage($width, $height, 0, 10);
$im = new Imagick($src_file);
$im -> thumbnailImage($width - $width / 10, $height - $height / 10, true);
$im_width = $im -> getImageWidth();
$im_height = $im -> getImageHeight();
$fon -> compositeImage($im, Imagick::COMPOSITE_OVER, ($width - $im_width) / 2, ($height - $im_height) / 2);
$file = fopen($dest_file, 'w');
fwrite($file, $fon -> getImageBlob());
fclose($file);
}
RenderImage('1.jpg', '2.jpg');
?>
Исходное изображение
Результат
я для этих целей использую Highslide JS
Для PHP пользуюсь phpThumb. Могу ошибаться, но, по-моему, он умеет делать ограничение только по одной стороне.
Ещё у него есть очень полезная фича, которую я теперь всегда использую при создании превьюшек: наложение unsharp mask. Сильно улучшает вид мелкой картинки. Параметры пришлось подобрать один раз, с тех пор работают для всех сайтов, какие делал.
Другое дело, что алгоритм этот реализован на голом пхп, и занимает достаточно много времени и памяти. Поэтому собираюсь заюзать для тех же целей ImageMagick. Он тоже умеет unsharp, только параметры придется снова подобрать.
Ещё у него есть очень полезная фича, которую я теперь всегда использую при создании превьюшек: наложение unsharp mask. Сильно улучшает вид мелкой картинки. Параметры пришлось подобрать один раз, с тех пор работают для всех сайтов, какие делал.
Другое дело, что алгоритм этот реализован на голом пхп, и занимает достаточно много времени и памяти. Поэтому собираюсь заюзать для тех же целей ImageMagick. Он тоже умеет unsharp, только параметры придется снова подобрать.
Вот ещё один случай из практики
Периодически возникает необходимость для каждой картинки генерить квадратную превьюшку с фрагментом этой картинки. В этом случае мне не годился вариант с уменьшением по меньшей стороне, и последующим обрезанием.
Например, мне нужна превьюшка 50х50, а исходная картинка размером 1024х768. Если уменьшить её по вертикали до 50px, а потом обрезать, это будет не фрагмент, а просто сильно уменьшенная обрезанная картинка. Вырезать же квадрат из оригинальной картинки тоже плохо — детали слишком мелкие получаются.
Опытным путем пришёл к такому решению — уменьшаю исходную картинку по меньшей стороне до трёхкратного размера превьюшки (3х50), а дальше делаю случайный сдвиг по высоте и ширине (с учётом того, что картинка обычно прямоугольная) и вырезаю фрагмент 50х50. Если фрагмент получился неинтересный — удаляется и автоматом создаётся новый.
Периодически возникает необходимость для каждой картинки генерить квадратную превьюшку с фрагментом этой картинки. В этом случае мне не годился вариант с уменьшением по меньшей стороне, и последующим обрезанием.
Например, мне нужна превьюшка 50х50, а исходная картинка размером 1024х768. Если уменьшить её по вертикали до 50px, а потом обрезать, это будет не фрагмент, а просто сильно уменьшенная обрезанная картинка. Вырезать же квадрат из оригинальной картинки тоже плохо — детали слишком мелкие получаются.
Опытным путем пришёл к такому решению — уменьшаю исходную картинку по меньшей стороне до трёхкратного размера превьюшки (3х50), а дальше делаю случайный сдвиг по высоте и ширине (с учётом того, что картинка обычно прямоугольная) и вырезаю фрагмент 50х50. Если фрагмент получился неинтересный — удаляется и автоматом создаётся новый.
НЛО прилетело и опубликовало эту надпись здесь
плохо что там картинки налету генерятся каждый раз (сужу по демке). а функционал вполне себе.
можно через реврайт делать.
например
если файла нет, то его обрабатывает этот скрипт, складывает в соответствующую папку и отображает. в след раз подгрузится уже уменьшенная картинка. делал таким способом на одном проекте превью
можно через реврайт делать.
например
если файла нет, то его обрабатывает этот скрипт, складывает в соответствующую папку и отображает. в след раз подгрузится уже уменьшенная картинка. делал таким способом на одном проекте превью
к сожалению, при обработке phpThumb картинки с прозрачностью результат выглядел более чем глючно.
поэтому пришлось все превью делать вручную.
поэтому пришлось все превью делать вручную.
НЛО прилетело и опубликовало эту надпись здесь
Совет бесплатно — еще один параметр — png картинка, которая ставится поверх. Решается куча задач: от банального копирайта, до закругленных уголков и значка проиграть видео на превью к видео.
Вот нетерплю такое. Те, кто хочет «украсть», чтобы незаконно использовать — украдут полюбому, хоть двадцать пять картинок поверх поставь. А вот обычные пользователи, которым хочется сохранить её для себя, страдают серъезно и мучают тех «кто разбирается» чтобы они им эту картинку сохранили (если очень хочется). На каком-то сайте о клубной жизни, помнится, такая хрень была. Чтобы сохранить найденную фотку с самим собой, нужно было зарегистрироваться.
А если обрезать фотографии, зачастую ничего важного не теряется.я, как фотограф, категорически протестую. С «фотками» («я, жена и Пизанская башня», «Иван Иваныч лицом в салате») обычно ничего страшного не происходит, за исключением отрезания лица или другой важной детали. А вот как раз у фотографий есть такое понятие как композиция, которую очень легко нарушить бездумным кадрированием. Поэтому на всяческих фотосайтах делают превьюшки без обрезания и с сохранением пропорций.
Ну, если только вы хотите найти композицию на превьюшках 100×100 пикселей :)
Совершенно ясно, что увеличенные копии обрезать ненужно.
Совершенно ясно, что увеличенные копии обрезать ненужно.
композицию на превьюшках как раз отлично видно
Попробуйте обрезать вот эту превьюшку до квадрата — получится непонятно что
Попробуйте обрезать вот эту превьюшку до квадрата — получится непонятно что
Желаю удачи в начинании. Я сам много вожусь с превьюшками и пришел к выводу: на сайте должен быть механизм интерактивного создания превьюшки — на тот случай, когда автомат обрезал некрасиво.
Совершенно не факт, что «главная часть картинки сверху»! Только человек (автор) может решить что там главное. Это я как фотограф утверждаю :)
В сети есть плагины-хелперы для ручного создания превью. Можно погуглить «jquery thumbnail resize»
Ещё хочу сказать про случай «Иногда бывает нужен какой-то определенный размер по одной из координат, а размер другой координаты может быть произвольным.» — на самом деле это частный случай превью без обрезания. Совсем произвольной вторую координату оставлять неразумно. Просто вписываем картинку в очень вытянутый, но не бесконечный (!!!) прямоугольник.
Совершенно не факт, что «главная часть картинки сверху»! Только человек (автор) может решить что там главное. Это я как фотограф утверждаю :)
В сети есть плагины-хелперы для ручного создания превью. Можно погуглить «jquery thumbnail resize»
Ещё хочу сказать про случай «Иногда бывает нужен какой-то определенный размер по одной из координат, а размер другой координаты может быть произвольным.» — на самом деле это частный случай превью без обрезания. Совсем произвольной вторую координату оставлять неразумно. Просто вписываем картинку в очень вытянутый, но не бесконечный (!!!) прямоугольник.
Использую для этих целей неплохой класс Thumb And Crop. Но если вам нужны еще и watermark + всевозможные эффекты, то можно посмотреть в сторону EasyPhpThumbnail Class — это что качается второго типа изображений.
Для первого типа возможно использования WYSIWYG редактора + спец. плагины для редактирования изображений, либо путем модификации функций самого редактора.
Для первого типа возможно использования WYSIWYG редактора + спец. плагины для редактирования изображений, либо путем модификации функций самого редактора.
На PHP нравится библиотека Asdio — есть практически все функции, которые необходимы (и драйверы для работы как с GD, так и с Image Magick). Жаль, не обновляется уже.
Согалсен, прочтение документации для imageMagic это не кошерно, да и сам продукт openSrouce не нравится, да?
Странно, что никто не вспомнил более цивильного слова «Миниатюра»
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Модификация изображений для сайта, или какие бывают превьюшки