Модификация изображений для сайта, или какие бывают превьюшки

[bigdogsru]

Я попробовала на некоторых сайтах генерировать превьюшки без обрезания и искажения пропорций, и располагать и не в ряд, а «плавающими». А пользователи при создании галереи могут передвигать их вправо-влево, получая не обязательно «строгие» ряды. Иногда такой способ позволяет добиться лучших результатов.



На эту мысль меня навела покупка «нестандартного» бумажного фотоальбома, в котором на каждой странице можно было разместить 2 вертикальных и 3 горизонтальных фотографии.

[homm]

К сожалению, такой способ мало применим при резиновой верстке. Плавающие картинки могут очень по разному располагаться при разной ширине окна.

[bigdogsru]

Не спорю. Потому и написала — «иногда».

[Delfino]

есть jQuery плагин Masonry, который распологает блоки наиболее компактно. думаю, он мог бы помочь.

[ZUGA]

К большому сожалению иногда приходится использовать джаваскрипт для таких вещей.

[WayBe]

Вот старое, доброе решение:
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.

[homm]

При беглом взгляде мне не кажется, что эта библиотека умеет то, что требуется. Смотреть более пристально на более чем сотню не сгруппированных параметров не хочется.

[Kicker]

Как вариант можно использовать вот это. Да, не спорю может установка и создание самой превьюшки займет не много больше времени — зато ты точно знаешь как эта самая превьюшка будет выглядеть

[Terion]

о! спасибо) а то когда-то потерял эту штуку, все никак найти не мог

[AlienZzzz]

я в джанге использую уже давно — code.google.com/p/sorl-thumbnail/, только его поддерживать перестали походу, (((( а очень нужно продолжение.

[homm]

Это отличный пример ничего не умеющего приложения. Я был поражен, сколько кода было написано не пригодного к реальному использованию и не имеющего никаких возможностей для расширения.

[AlienZzzz]

покажите мне аналог, который также удобно встраиваеться в джангу и также удобен с обрезкой изображений.

[homm]

Всему свое время.

[AlienZzzz]

Во первых я Вас знаю ) приветствую.)

Во вторых реально рабочего нормального примера я не смог найти.

[roller]

ого, какой у вас тут жесткач оказывается
у нас в Друпале все решается при помощи ImageCache + ImageCache_Actions и пяти кликов

всем удачи ;)

[AlienZzzz]

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

Покажите, я же не в претензию.

[roller]

оригиналы всегда сохраняются, далее при конфигурации вида выбирается какой пресет имаджкеша будет применяться при выводе картинки

[jmeprogrammer]

Для Drupal есть отличный модуль Image Resize Filter. Он как раз позволяет справится с проблемой номер 1.
Вставляем картинку через WYSIWYG. Задаем ее размеры (пропорционально тягая за границы) и модуль автоматически создаст миниатюру нужного размера. Таким образом, даже если пользователь админки загрузит картинку очень большого размера — в итоге получим уменьшенную миниатюру нужного размера.

[diGreez]

Предложил бы еще один вариант организации галереи, вариации на тему технологий Филипс:


Набросал на скорую руку из первых попавшихся картинок. Мне кажется алгоритм создания вполне можно автоматизировать на сервере, хотя могу и ошибаться — я не программист.

[roller]

класс! только переход жестковат

[diGreez]

Специально ничего не сглаживал и не подбирал под формат. Просто демонстрация того, что можно сделать с помощью растягивания и размытия.

[equand]

И легко реализуется, хорошо адаптировали ambilight :)

[yul]

а мне наоборот нравится так, картинка не будет напоминать размазню

[dfuse]

Это хороший интересный способ. Надо взять на вооружение.

[docomo]

Идея отличная!
А полчаса курения доки по ImageMagick позволят реализовать ее для всех вариантов, описываемых автором поста.

[Shvonder]

Простейший рабочий вариант с использованием 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');
?>

Исходное изображение


Результат

[xn__p2a]

Симпатишно.
Интересно, что получится с картиной «Чёрный квадрат», если сделать из неё привью по той же схеме. Думаю, Малевич разрыдался бы, увидев это ;)

[kydapodatsya]

я для этих целей использую Highslide JS

[bigdogsru]

Для преобразования изображений на стороне сервера? оО

[LuciferOverLondon]

Для PHP пользуюсь phpThumb. Могу ошибаться, но, по-моему, он умеет делать ограничение только по одной стороне.

Ещё у него есть очень полезная фича, которую я теперь всегда использую при создании превьюшек: наложение unsharp mask. Сильно улучшает вид мелкой картинки. Параметры пришлось подобрать один раз, с тех пор работают для всех сайтов, какие делал.

Другое дело, что алгоритм этот реализован на голом пхп, и занимает достаточно много времени и памяти. Поэтому собираюсь заюзать для тех же целей ImageMagick. Он тоже умеет unsharp, только параметры придется снова подобрать.

[LuciferOverLondon]

Ещё, кстати, бывает, что нужно на картинку наложить свой watermark, или попросту — лого. Это phpThumb также умеет. Самый простой способ — сделать PNG с нужной прозрачностью в нужных местах, и накладывать его.

[pivchanskiy]

Вот ещё один случай из практики

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

Например, мне нужна превьюшка 50х50, а исходная картинка размером 1024х768. Если уменьшить её по вертикали до 50px, а потом обрезать, это будет не фрагмент, а просто сильно уменьшенная обрезанная картинка. Вырезать же квадрат из оригинальной картинки тоже плохо — детали слишком мелкие получаются.

Опытным путем пришёл к такому решению — уменьшаю исходную картинку по меньшей стороне до трёхкратного размера превьюшки (3х50), а дальше делаю случайный сдвиг по высоте и ширине (с учётом того, что картинка обычно прямоугольная) и вырезаю фрагмент 50х50. Если фрагмент получился неинтересный — удаляется и автоматом создаётся новый.

[Londeren]

плохо что там картинки налету генерятся каждый раз (сужу по демке). а функционал вполне себе.
можно через реврайт делать.
например

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

[gladkij]

к сожалению, при обработке phpThumb картинки с прозрачностью результат выглядел более чем глючно.
поэтому пришлось все превью делать вручную.

[Staser]

Я думаю, даже бы программист не стал бы придумывать заумный алгоритм, чтобы обработала такие прелести бесчувственная машина =)

[Obi]

Любая прелесть перестанет быть прелестью после 3000 однотипных с ней манипцуляций.

[akzhan]

batch в photoshop способен минимизировать проблемы.

хотя сиськи всё равно выделять руками…

[Obi]

> хотя сиськи всё равно выделять руками…

С легкой горечью было произнесено. Не? xD

[ainu]

Совет бесплатно — еще один параметр — png картинка, которая ставится поверх. Решается куча задач: от банального копирайта, до закругленных уголков и значка проиграть видео на превью к видео.

[Xfrid]

Вот нетерплю такое. Те, кто хочет «украсть», чтобы незаконно использовать — украдут полюбому, хоть двадцать пять картинок поверх поставь. А вот обычные пользователи, которым хочется сохранить её для себя, страдают серъезно и мучают тех «кто разбирается» чтобы они им эту картинку сохранили (если очень хочется). На каком-то сайте о клубной жизни, помнится, такая хрень была. Чтобы сохранить найденную фотку с самим собой, нужно было зарегистрироваться.

[Xfrid]

Ах да, и предварительно использовать интуицию, чтобы догадаться, что для того, чтобы правая клавиша заработала, нужно зарегистрироваться.

[bigdogsru]

А Print Screen запретили что ли? :-)
Мой основной аргумент для заказчиков, требующих «защиты от всех и вся» — Print Screen запретить невозможно ;-)

[adminimus]

А если обрезать фотографии, зачастую ничего важного не теряется.

я, как фотограф, категорически протестую. С «фотками» («я, жена и Пизанская башня», «Иван Иваныч лицом в салате») обычно ничего страшного не происходит, за исключением отрезания лица или другой важной детали. А вот как раз у фотографий есть такое понятие как композиция, которую очень легко нарушить бездумным кадрированием. Поэтому на всяческих фотосайтах делают превьюшки без обрезания и с сохранением пропорций.

[homm]

Ну, если только вы хотите найти композицию на превьюшках 100×100 пикселей :)
Совершенно ясно, что увеличенные копии обрезать ненужно.

[adminimus]

композицию на превьюшках как раз отлично видно
Попробуйте обрезать вот эту превьюшку до квадрата — получится непонятно что

[homm]

Понять то, что это лавочка я смог только при 200% зуме. Думаю, это о многом говорит :)

[adminimus]

это говорит о том, что у вас плохо со зрением. Доктора посещали?

[bigdogsru]

Отсутствие угадываемых деталей на превьюшке подогревает желание посмотреть полную картинку. Если же композиция не угадывается в обрезанном квадарате — то ее скорей всего нету ;-)

[artoodetoo]

Желаю удачи в начинании. Я сам много вожусь с превьюшками и пришел к выводу: на сайте должен быть механизм интерактивного создания превьюшки — на тот случай, когда автомат обрезал некрасиво.

Совершенно не факт, что «главная часть картинки сверху»! Только человек (автор) может решить что там главное. Это я как фотограф утверждаю :)

В сети есть плагины-хелперы для ручного создания превью. Можно погуглить «jquery thumbnail resize»

Ещё хочу сказать про случай «Иногда бывает нужен какой-то определенный размер по одной из координат, а размер другой координаты может быть произвольным.» — на самом деле это частный случай превью без обрезания. Совсем произвольной вторую координату оставлять неразумно. Просто вписываем картинку в очень вытянутый, но не бесконечный (!!!) прямоугольник.

[petun]

Использую для этих целей неплохой класс Thumb And Crop. Но если вам нужны еще и watermark + всевозможные эффекты, то можно посмотреть в сторону EasyPhpThumbnail Class — это что качается второго типа изображений.

Для первого типа возможно использования WYSIWYG редактора + спец. плагины для редактирования изображений, либо путем модификации функций самого редактора.

[Slaver]

На PHP нравится библиотека Asdio — есть практически все функции, которые необходимы (и драйверы для работы как с GD, так и с Image Magick). Жаль, не обновляется уже.

[mrmot]

Согалсен, прочтение документации для imageMagic это не кошерно, да и сам продукт openSrouce не нравится, да?

[Nashev]

Странно, что никто не вспомнил более цивильного слова «Миниатюра»