Feather an image from code

Question

Is there any way to feather an image from code? (If you don't know what feathering is, check this out - I'm not using dirty language)

I know professional design applications like Photoshop can do this, but I would for users to upload images to my site and then display them in a feathered fashion. (Now there's a sentence you don't hear every day)

Answer 1

As far as I know rmagick is the best for that: http://rmagick.rubyforge.org/portfolio2.html

... but the closest effect to what you're searching is this:

You could also let users upload their photo and then display it feathered using some CSS tricks (a transparent png on top of the image for instance)

Answer 2

Paperclip supports image manipulations using the ImageMagick application, which will allow you programmatically to manipulate the image on upload. Take a look at the subsection titled post processing in the link below

http://github.com/thoughtbot/paperclip

You'll have to get a little familiar with ImageMagick's CLI to figure out what you want but its definitely do-able.

Answer 3

Disclaimer: I work at Atalasoft.

Our free imaging SDK, DotImage Photo, could be used to do it. The easiest way would be to use overlay semi-transparent images on top of the original. You can create them at run-time to be the right size.

Answer 4

I can see two ways. In both ways you prepare the transparent PNG image that is the "feather" effect. Then you will combine this image with the original and you will get the requested result.

The solution would get a little more complicated in case of dynamic sizes - but the basic principle will be the same.

CSS way

In this case you can make the operation on the client side. Just prepare the transparent PNG mask that makes the "feather" effect - use Photoshop/Gimp to create it.

Let's suppose that you named your mask "feather.png" and the original image is named "source.jpg". Then you can use this HTML code

<div style="width: 200px;height: 200px; background: url(/images/source.jpeg)">
  <img width="200" height="200" src="/images/feather.png" />
</div>

Server side

In this case I'd definitely use paperclip gem. It uses magic imagemagick library. You would think of it as a Photoshop on command line (little bit exaggerating there but not much)

In your model:

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

And thats it. Then in your code when you'd like to use the "feathered" image you should use:

<%= image_tag avatar.image.url(:feather) %>

Or :normal for non-feathered version of it.

All the conversion and transformation is simply to be done as an assignment:

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!