Новости Joomla

0 Пользователей и 1 Гость просматривают эту тему.
  • 0 Ответов
  • 2803 Просмотров
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
всем ку! :)
предлагаю небольшой мануальчик по добавлению водяного знака ( watermark ) и/или скруглённых углов для превьюшек. в примере рассмотрим вариант для самого распространённого формата - jpeg.
смысл темы - показать простой путь использования водяного знака в формате png-24, с сохраниением всех градаций прозрачности.
правда, на пороге стоит css3, который позволяет скруглять картинки без танцев с бубном... но это - видеале. а в суровой реальности придётся прикручивать сторнние баблиотеки, чтобы заставить всё это безобразие внятно работать во всех актуальных браузерах, к тому же, вопрос с водяным знаком css3 не снимает.

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

итак, открываем файл plugins\content\sige.php
в районе 647 (со временем число изменится, конечно, так что не привязывайтесь к нему совсем уж сильно :) ) строки ищем примерно такой фрагмент:

Код
if ($watermark)
{
ImageJPEG($thumbimage, $mosConfig_absolute_path.$rootfolder.$_images_dir_.'/thumbs/'.$image_hash , $_quality_);
}
else
{

небольшое появнение по повтоду того, что же тут происходит:
во-первых, проверяется значение переменной $watermark, которая содержит значение, переданное из настроек плагина. если водяной знак используется, то происходит запись готовой превьюшки с одним именем, если нет, то-с другим.
в данном случае проблема в механизме формирования превьюшек. если выбрать в настройках плагина "use watermark", то он наложится сначала на большое изображение, которое потом пожмётся в превьюшку.
т.е. если мы захотим использовать метод для наложения рамки со скруглёнными углами, то на выходе получим весьма загадочный вариант - и большое и маленькое иображние будет содержать нашу рамку, при этом совсем не в том виде, в котором ужно нам.
поэтому отключаем в плагине использование водяного знака и добавляем небольшой код сразу за скобкой после "else":

Код
$watermarkimage = imagecreatefrompng($mosConfig_absolute_path.'/plugins/content/plugin_sige/watermark.png'); //загрузили водяной знак
list($width_wm, $height_wm) = getimagesize($mosConfig_absolute_path.'/plugins/content/plugin_sige/watermark.png'); //получили информацию по его ширине/высоте
$th = imagecreatetruecolor($width_wm, $height_wm); //создали временное полноцветное изображение
imagecopy($th, $thumbimage, 0, 0, 0, 0, $width_wm, $height_wm); // скопировали превьюшку во временное изображение
imagecopy($th, $watermarkimage, 0, 0, 0, 0, $width_wm, $height_wm); // скопировали поверх превьюшки наш водяной знак в формате png-24 c с сохранением прозрачности
imagecopymerge( $thumbimage, $th, 0, 0, 0, 0, $width_wm, $height_wm, 100); //наложили поверх первоночальной превьюшки её же, но уже с нанесённым фодяным знаком
imagedestroy($watermarkimage); //очистили память от временных изображений
imagedestroy($th);

в итоге махинаций у нас сначала создаётся копия превьюшки с наложенным на неё водяным знаком, а уже потом этот рисунок накладывается на оригинальную превьюшку.
при этом мы можем управлять прозрачностью водяного знака сразу двумя способами:
а) модифицируя его в графическом редакторе и меняя ему прозрачность (т.к. у нас - полноценный png-24)
b) меняя параметр в функции
imagecopymerge( $thumbimage, $th, 0, 0, 0, 0, $width_wm, $height_wm, 100);
с учётом того, что верхнее и нижнее изображение у нас отличаются ровно на водяной знак, на выходе смена параметра даст нам изменение прозрачности только водяного знака.

собственно, всё.
осталось выставить в настройках плагина создание миниматюр методом crop (обрезки), выставить нужный размер для превьюшек и создать такой же по размеру водяной знак-рамку взамен имеющемуся (plugins/content/plugin_sige/watermark.png')

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

Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Ссылки на изображения со всех страниц

Автор ast

Ответов: 10
Просмотров: 487
Последний ответ 13.12.2019, 16:36:08
от ast
360 Zoomer - jQuery вращалка с возможностью увеличения изображения

Автор effrit

Ответов: 2
Просмотров: 494
Последний ответ 01.04.2019, 22:21:22
от effrit
PopUp c помощью запроса в браузер

Автор Team

Ответов: 0
Просмотров: 1287
Последний ответ 23.12.2011, 14:01:33
от Team