Я вижу два пути.В обоих случаях вы подготавливаете прозрачное изображение PNG, которое является эффектом «перьев».Затем вы объедините это изображение с оригиналом и получите запрошенный результат.
Решение будет немного сложнее в случае динамических размеров - но основной принцип будет таким же.
CSS way
В этом случае вы можете выполнить операцию на стороне клиента.Просто подготовьте прозрачную PNG-маску, которая создает эффект «перо» - используйте Photoshop / Gimp для ее создания.
Предположим, что вы назвали свою маску «feather.png», а исходное изображение называется «source.jpg»».Тогда вы можете использовать этот HTML-код
<div style="width: 200px;height: 200px; background: url(/images/source.jpeg)">
<img width="200" height="200" src="/images/feather.png" />
</div>
Серверная сторона
В этом случае я бы определенно использовал gem скрепки.Он использует магию imagemagick библиотека.Вы могли бы думать об этом как о Photoshop в командной строке (немного преувеличивая, но не сильно)
В вашей модели:
class Avatar < ActiveRecord::Base
has_attached_file :image, :styles => {
:feather => {
:geometry => "200x200",
:format => :jpg
},
:normal => {
:geometry => "200x200",
:format => :jpg
}
},
:convert_options => {
:feather => "#{Rails.root.join('public/images/feather-200x200.png')} -composite"
}
end
И это все.Затем в вашем коде, когда вы хотите использовать «пернатое» изображение, вы должны использовать:
<%= image_tag avatar.image.url(:feather) %>
Или: обычное для не пернатых его версии.
Все преобразования ипреобразование просто выполнить как задание:
avatar = Avatar.new
# from file...
avatar.image = open(....)
# or maybe from form...
avatar.image = params[:...]
# it not only saves the avatar to db but runs the image transformations
avatar.save!