Обработка изображений: crop, watermark, скругление углов
В новой версии livestreet намного улучшена работа с изображениями (и в плане качества, и в плане гибкости). Для обслуживания всевозможных операций с изображениями отведен специальный engine-модуль Image.
Коротко о том, что появилось нового:
1. Решена проблема с некрасивым ресайзом неквадратных аватарок (путем предварительного вырезания наибольшего возможного квадрата).
2. Устранены «почти» все проблемы с обработкой alpha и non-alpha прозрачности («почти»=«на столько на сколько это вообще возможно сделать с помощью PHP+GD2»). По крайней мере прозрачные png теперь можно использовать в аватарках спокойно.
3. Формирование HTML кода выводимого изображения централизировано в одной функции Image_BuildHTML(), которая запрашивает путь к изображению и дополнительные параметры (title,alt,align).
4. Watermark: возможность автоматически добавлять на загружаемые изображения надписи или изображения с достаточно гибкой конфигурацией (пример надписи см выше).
5. Закругление углов изображения.
О том, как пользоваться 4 и 5 поговорим подробнее.
Все настройки watermark`ов и скругления углов задаются через конфигурацию. За это отвечает сегмент $config['module']['image'] в файле config/config.php (соответственно, эти настройки можно переопределять при необходимости в хуках и плагинах). Конфигурация ступенчатая (двухуровневая): это означает, что есть
а) дефолтные настройки ($config['module']['image']['default']) — они будут применены абсолютно для всех изображений проходящих через модуль Image. Описание возможных параметров конфигурации:
// Использовать или нет watermark
$config['module']['image']['default']['watermark_use'] = false;
// Тип ("text" или "image")
$config['module']['image']['default']['watermark_type'] = 'text';
// Позиция, задается отступом от левого верхнего угла
// При указании перед число минуса сторона отсчета меняется на противоположную
// Например "0,-0" означает левый нижний угол, "-0,-0" - правый нижний
// Специальное значение 1/2 используется для обозначения середины изображения
$config['module']['image']['default']['watermark_position'] = '0,24';
// Далее идут настройки текста надписи (если тип watermark = text)
// Надпись на изображении при таких настройках вы видели выше в топике
$config['module']['image']['default']['watermark_text'] = '© LiveStreet';
$config['module']['image']['default']['watermark_font'] = 'arial';
$config['module']['image']['default']['watermark_font_color'] = '255,255,255';
$config['module']['image']['default']['watermark_font_size'] = '10';
$config['module']['image']['default']['watermark_font_alfa'] = '0';
$config['module']['image']['default']['watermark_back_color'] = '0,0,0';
$config['module']['image']['default']['watermark_back_alfa'] = '40';
// Название изображения (актуально, если тип watermark = image)
$config['module']['image']['default']['watermark_image'] = false;
// Использовать или нет скругление углов
$config['module']['image']['default']['round_corner'] = false;
// Радиус скругления
$config['module']['image']['default']['round_corner_radius'] = '18';
// Качество просчета скругления (при увеличения повышает нагрузку)
$config['module']['image']['default']['round_corner_rate'] = '40';
// Директории хранения изображений для watermark и шрифтов для надписей
$config['module']['image']['default']['path']['watermarks'] = '___path.root.server___/engine/lib/external/LiveImage/watermarks/';
$config['module']['image']['default']['path']['fonts'] = '___path.root.server___/engine/lib/external/LiveImage/fonts/';
// Качество сохранения JPG
$config['module']['image']['default']['jpg_quality'] = 100; // Число от 0 до 100
б) настройки конкретного типа изображений. Сейчас поддерживаются типы изображений foto, avatar, topic. В модулях\плагинах\хуках вы можете создавать любые новые типы (так как тип изображения отличается от других только совокупностью подгружаемых параметров).
Идея состоит в следующем: для каждого конкретного типа изображения указываются только те настройки, которые отличаются от настроек default/ Например, я хочу скруглять углы только на аватарках. Тогда я указываю:
// для всех
$config['module']['image']['default']['round_corner'] = false;
// только для аватарок
// при это остальные настройки будут взяты из секции default
$config['module']['image']['avatar']['round_corner'] = false;
Аналогично и с другими параметрами и типами изображений.
Пример надписи вы уже увидели, пример наложенного прозрачного PNG (желтая молния) на загруженную пользователем фотографию:
В будущем модуль будет развиваться в направлении простого «переключения» с GD2 на другие средства для работы с изображениями, а также максимальной гибкости в работе с различными хранилищами. Но, это пока планы на будущее. Описанный же выше функционал доступен на SVN. Комментарии, мощное тестирование и баг-репорты приветствуются.
79 комментариев
Но я и сейчас юзаю LS 0.4
P.S. Напиши плз еще статью про плагины, очень бы хотелось попробовать их в деле =)
Хотя, я счас разбираюсь с модулями — все понятно должно быть :)
В общем, кидай ссылки — подумаю над этим предложением. Можно в тви.
P.S. В дистрибутиве в качестве примера в плагин переделан ActionProfiler и обслуживающий его модуль Profiler.
а) С прозрачностью решены частично, если не считать ситуаций со значительным масштабированием прозрачных изображений.
б) Анимированные gif обрезаются по первому кадру.
в) Что-то другое?
Также интересен «вопрос примерно по теме изображений» — хотелось бы чтобы в 0.4 был встроенный «очиститель пустых изображений» — то бишь изображений которые не используются в топиках.
Это не так просто, как может показаться. Обработка изображений в 0.3.1 распределена тонким слоем по нескольким модулям, функциям, include`ам.
В 0.4 сделана специальная обертка для cron-процессов и один пример ее использования (notifyer). На нем можете делать собиратели мусора, технически задача упрощается во много раз.
А владельцам сайтов придется выбирать. Если все устраивает, то оставайся на месте. Переход на 0.4. будет болезненный. Но это болезнь роста, которой не избежать. И переходить будут те, для кого затраты от переезда будут покрываться бОльшими возможностями. Насколько я знаю, есть сайты, которые и на версии 0.2 живут — обросли своими допилами и фичами, и их владельцы не считают, что затраты на переезд на 0.3 имеют смысл.
Какими? Кроме скорости работы и закрытых блогов? Существенные такие, которые стоят того?
А так действительно то, чего не хватало! :)
На что нужно изменить — (false) ???
Ещё, когда водяной знак, выходит не уменьшенным, края сильно рваные у надписи, где переходит на прозрачность. В чём тут дело? Опцию Interlanced в Photoshop отмечать при сохранении или нет?
У меня так! а водяной знак не загружается! Что я зделал не так?
чтобы на вотемарке было примерно так "©LiveStreet posted:XmeJI"?
Мучаюсь второй день, пытаюсь заставить работать эту функцию, а точнее две: закругление углов и текстовый watermark.
Что уже только не пробовала, как уже только не мучилась, но не работает, негодяй =(
Помогите, пожалуйста, советом — как этого зверя заставить работать?!
Обещаю оперативно добавлять ответы на любые уточняющие вопросы =)
В конфиге у меня вот что:
Заранее благодарна.
С уважением, Кристина.
PS: в engine/lib/external/LiveImage/fonts/ все ок, лежит файл шрифта arial.ttf
Но я попробовала, результата никакого =( Ладно с watermark, даже углы не скругляются =((
Возможно в каких-то особенностях GD2…
Логи серверные перелопатила — там ни слова об этом, тоже самое и в логах самого движка.
PS: Версия 0.4.2
после чего стали появляться округления при загрузке аватара…
покрутила-покрутила, стали округляться и в топиках, загруженные lseditor'ом картинки,
но watermark так и не проявился =(
Аушеньки, люди добрые, ткните мну носиком в нужную сторону, где бы еще порыться...
в конце:
будт тогда закруглённые углы + текстовый вотермарк только в топиках.
СПАСИБИЩЕ ВАМ ОГРОМНОЕ!!!
прописал я в файле конфиг, как написано в описании
$config['module']['image']['default']['watermark_use'] = false;
$config['module']['image']['default']['watermark_type'] = 'text';
$config['module']['image']['default']['watermark_position'] = '0,24';
$config['module']['image']['default']['watermark_text'] = 'Moi Site';
И все равно вставляет © LiveStreet, я уже и кеш чистил, не помогло…
<?php
/* — * @Plugin Name: Use Watermark
* @Plugin Id: usewatermark
* @Plugin URI:
* @Description: The user can choose to use watermark or not
* @Author: stfalcon-studio
* @Author URI: stfalcon.com
* @LiveStreet Version: 0.4.2
* @License: GNU GPL v2, www.gnu.org/licenses/old-licenses/gpl-2.0.html
* — */
//Config::Set('module.image.default.watermark_use', true);
//Config::Set('module.image.default.watermark_type', 'text');
//Config::Set('module.image.default.watermark_position', '-0,-0');
//Config::Set('module.image.default.watermark_font', 'verdana');
//Config::Set('module.image.default.watermark_font_color', '255,255,255');
//Config::Set('module.image.default.watermark_font_size', '12');
//Config::Set('module.image.default.watermark_font_alfa', '0');
//Config::Set('module.image.default.watermark_back_color', '0,0,0');
//Config::Set('module.image.default.watermark_back_alfa', '50');
//Config::Set('module.image.default.watermark_min_width', 200);
//Config::Set('module.image.default.watermark_min_height', 130);
//Config::Set('module.image.default.path.fonts', '___path.root.server___/engine/lib/external/LiveImage/fonts/');
//Config::Set('module.image.default.jpg_quality', 100); // Число от 0 до 100
Config::Set('module.image.foto.watermark_use', false);
Config::Set('module.image.topic.watermark_use', true);
$config['module']['image']['default']['watermark_use'] = false;
$config['module']['image']['default']['watermark_type'] = 'text';
$config['module']['image']['default']['watermark_position'] = '0,24';
$config['module']['image']['default']['watermark_text'] = '© test';
$config['module']['image']['default']['watermark_font'] = 'arial';
$config['module']['image']['default']['watermark_font_color'] = '255,255,255';
$config['module']['image']['default']['watermark_font_size'] = '10';
$config['module']['image']['default']['watermark_font_alfa'] = '0';
$config['module']['image']['default']['watermark_back_color'] = '0,0,0';
$config['module']['image']['default']['watermark_back_alfa'] = '40';
$config['module']['image']['default']['watermark_image'] = false;
$config['module']['image']['default']['watermark_min_width'] = 200;
$config['module']['image']['default']['watermark_min_height'] = 130;
$config['module']['image']['default']['round_corner'] = true;
$config['module']['image']['default']['round_corner_radius'] = '18';
$config['module']['image']['default']['round_corner_rate'] = '40';
$config['module']['image']['default']['path']['watermarks'] = '___path.root.server___/engine/lib/external/LiveImage/watermarks/';
$config['module']['image']['default']['path']['fonts'] = '___path.root.server___/engine/lib/external/LiveImage/fonts/';
$config['module']['image']['default']['jpg_quality'] = 80; // Число от 0 до 100
$config['module']['image']['topic']['watermark_use'] = true;
$config['module']['image']['topic']['round_corner'] = true;
$config = array(
'backup_original' => 0, //делаеть ли бекап оригинала картинки 0/1
'path_image_original' => '___path.uploads.root___/images_original' //путь к оригиналу
);
return $config;
а в конфиге плагина оставь только
Все получилось!
возможностей побольше будет
Я ему этому скрипту уже и спел и станцевал, ну сил моих уже нету. А после того как он заработает (это я так мечтал) прикручу его к TinyMCE. Может существует на эту тему работающий плагин. А то я уже начинаю жалеть что связался с этой Live Street.
— такого кода, вписал сам но водяной знак на мой не сменился.В чем проблема??!