Crop circular image with dragonfly rails

Question

I'm using dragonfly ~> 0.9.15

Given an image, I'm confused at how to use the convert method in dragonfly to crop a circular portion from the image with transparent background.

I am able to use a direct image magick command to run it from command line but the example command I found uses actual files and I'm unaware of how to get the file while dragonfly processes it on the fly.

Here's the actual command I took from a stack overflow question with imagemagick.

https://mcmap.net/q/649841/-crop-or-mask-an-image-into-a-circle

convert -size 200x200 xc:none -fill walter.jpg -draw "circle 100,100 100,1" circle_thumb.png

When I tried to achieve the same with dragonfly, this is the config:

require 'dragonfly/rails/images'

Dragonfly[:images].configure do |c|
  c.job :crop_circle do
    process :resize, "320x440"
    encode :png
    process :convert, '-virtual-pixel HorizontalTile -background transparent -draw "circle 400,400 400,1" -compose Copy_Opacity -composite'
  end
end

I get the error no such image when this runs in the server log.

How to configure the convert function for this using the imagemagick commands?

Marchpast

Maybe you should do it in CSS – Illinois

Eventually thats what I went with, but it lacks support in older browsers which is why I needed the server side image processing bit. – Marchpast

Answer 1

Perhaps my solution can help others who are looking for a way to generate rounded images with the Dragonfly gem.

I was not able to find a solution readily available, but I managed to piece something together by taking a little bit here and there.

Turns out there is a very easy way to make rounded images with ImageMagick (6.8.9-1) using the vignette option which is explained here.

The following command line will generate an image with transparent background and the image rounded:

convert profile.png -alpha set -background none -thumbnail 50x50^ -vignette 0x0 rounded_profile.png

We can now get rounded images for profile pictures by adding a :rounded processor to the dragonfly.rb initializer as shown below:

require 'dragonfly'

# Configure
Dragonfly.app.configure do
  plugin :imagemagick

  # Fictive secret no worries
  secret "64d123456dafb767892c1d28ca6d123456ea4cc373dac117d6d1123456a29d6e"

  url_format "/media/:job/:name"

  datastore :file,
    root_path: Rails.root.join('public/system/dragonfly', Rails.env),
    server_root: Rails.root.join('public')

  processor :rounded do |content, size|
    content.shell_update ext: 'png' do |old_path, new_path|
      "/usr/local/bin/convert #{old_path} -alpha set -background none -thumbnail #{size}^ -vignette 0x0 #{new_path}"
    end
  end
end

Notice you might have to change the path for your convert command depending on which platform you are running on, I'm on Mac OS and ImageMagick is installed through Homebrew.

Now from any model having an image handled by Dragonfly you can call:

a_model_instance.an_image.rounded('50x50').url

To return a rounded image which is 50px by 50px.

Kettle