Довольно часто возникает задача поставить watermark на изображения на сайте. Обычно большинство разработчиков не видит проблему (многие PHP CMS это из коробки тянут), однако в мире Rails и движка RefineryCMS не все так гладко.
Refinery использует Dragonfly (специальный gem для работы с изображениями, основанный на Rack и обрабатывающий изображения «на лету») и здесь могут возникнуть некоторые трудности.
Под катом описано как сделать watermark на изображение используя наложение картинки с водяным знаком на основное изображение в RefineryCMS.
Само собой вам нужна картинка с прозрачным фоном png расширения. Назовем ее watermark.png и разместим в public/ директории проекта.
Теперь о том, как сделать, чтобы знак накладывался. Dragonfly прекрасно поддерживает процессоры обработки изображений. Основы процессинга описаны в документации.
Итак сделаем свой класс по обработке изображений, который и будет накладывать водяной знак:
Основная идея по созданию процессоров для Dragonfly взята отсюда. Теперь разберем код.
Класс содержит 2 метода.
Метод new_tempfile создает временный файл — именно он будет «на выходе» (это результат операции наложения изображений) и используется в команде ImageMagick.
Метод watermark соответственно наш метод добавления водяного знака. Здесь все просто: аргументом temp_object является объект dragonfly изображения. Дальше мы создаем временный файл и записываем аргументы для команды composite из ImageMagick, которая и даст нам наложение изображений. Это простая и не оптимизированная версия, поэтому путь до файла watermark.png указывается прям здесь. Аргументы:
-dissolve 50% добавляет прозрачность.
-gravity south размещение снизу.
#{Rails.root}/public/watermark.png — путь до файла с вотермарком.
#{temp_object.path} — путь до исходного изображения.
#{tempfile.path} — путь до нашего временного файла. Именно последний и будет содержать итоговое «склеенное» изображение.
Теперь нам нужно подключить наш класс для обработки к приложению. Можно создать отдельный файл config/initializer/dragonfly.rb со следующим содержимым:
Первая строчка получает так называемое «приложение» Dragonfly от RefineryCMS, вторая строчка непосредственно регистрирует наш класс.
Теперь можно это использовать вот-так:
Будет выведена наша картинка уже с водяным знаком. Таким образом метод process из Dragonfly может работать с любыми зарегистрированными процессорами.
Данная статья на примере RefineryCMS показывает как можно быстро и просто добавить свой обработчик изображений к Dragonfly. Вы можете использовать это и без Refinery с другими прекрасными функциями из ImageMagick.
Refinery использует Dragonfly (специальный gem для работы с изображениями, основанный на Rack и обрабатывающий изображения «на лету») и здесь могут возникнуть некоторые трудности.
Под катом описано как сделать watermark на изображение используя наложение картинки с водяным знаком на основное изображение в RefineryCMS.
Само собой вам нужна картинка с прозрачным фоном png расширения. Назовем ее watermark.png и разместим в public/ директории проекта.
Теперь о том, как сделать, чтобы знак накладывался. Dragonfly прекрасно поддерживает процессоры обработки изображений. Основы процессинга описаны в документации.
Итак сделаем свой класс по обработке изображений, который и будет накладывать водяной знак:
class ImageProcessor
def watermark(temp_object)
tempfile = new_tempfile
args = " -dissolve 50% -gravity south #{Rails.root}/public/watermark.png #{temp_object.path} #{tempfile.path}"
full_command = "composite #{args}"
result = `#{full_command}`
tempfile
end
private
def new_tempfile(ext=nil)
tempfile = ext ? Tempfile.new(['dragonfly', ".#{ext}"]) : Tempfile.new('dragonfly')
tempfile.binmode
tempfile.close
tempfile
end
end
Основная идея по созданию процессоров для Dragonfly взята отсюда. Теперь разберем код.
Класс содержит 2 метода.
Метод new_tempfile создает временный файл — именно он будет «на выходе» (это результат операции наложения изображений) и используется в команде ImageMagick.
Метод watermark соответственно наш метод добавления водяного знака. Здесь все просто: аргументом temp_object является объект dragonfly изображения. Дальше мы создаем временный файл и записываем аргументы для команды composite из ImageMagick, которая и даст нам наложение изображений. Это простая и не оптимизированная версия, поэтому путь до файла watermark.png указывается прям здесь. Аргументы:
-dissolve 50% добавляет прозрачность.
-gravity south размещение снизу.
#{Rails.root}/public/watermark.png — путь до файла с вотермарком.
#{temp_object.path} — путь до исходного изображения.
#{tempfile.path} — путь до нашего временного файла. Именно последний и будет содержать итоговое «склеенное» изображение.
Теперь нам нужно подключить наш класс для обработки к приложению. Можно создать отдельный файл config/initializer/dragonfly.rb со следующим содержимым:
app = Dragonfly[:refinery_images]
app.processor.register(ImageProcessor)
Первая строчка получает так называемое «приложение» Dragonfly от RefineryCMS, вторая строчка непосредственно регистрирует наш класс.
Теперь можно это использовать вот-так:
<%= image_tag image.thumbnail('800x600#').process(:watermark).url %>
Будет выведена наша картинка уже с водяным знаком. Таким образом метод process из Dragonfly может работать с любыми зарегистрированными процессорами.
Данная статья на примере RefineryCMS показывает как можно быстро и просто добавить свой обработчик изображений к Dragonfly. Вы можете использовать это и без Refinery с другими прекрасными функциями из ImageMagick.