Dragonfly/imagemagick resize and crop and maybe add white padding

Question

With dragonfly I can do the following:

image.thumb('300x300#')

Which will resize the image, maintaining aspect ratio and cropping it centrally (effectively chopping off the ends of the longest edge).

However, if the image has an edge smaller than 300px, then it is scaled upwards. What I would prefer is that in this case the image is not resized, but instead white padding is added where necessary.

So basically, if both edges are 300px or over I want the normal behaviour from 300x300#, but if any edge is smaller than 300px, then the image is not resized at all, but still cropped to 300x300 with whitespace added where necessary.

Is this possible with either of Dragonfly's built in processors (#thumb or #convert? Or do I need to build my own processor? If so, what sort of imagemagick commands do I need to be looking at?

Answer 1

Best solution would be to create a white canvas image that is 300x300 then composite your image, centered, on top of the canvas image. Then crop it with center gravity (centered). This would yield a 300x300 image with a white canvas on any vertical or horizontal edges that had a dimension smaller than 300.

---

** For this solution you may need to install the RMagick gem, as I do not believe Dragonfly has extended the ImageMagick operations that you will need.

This is how I would approach it:

#Set file path first and load a white image called canvas that is 300x300 into Imagmagik
canvas_file_path = "#{Rails.root}/app/assets/images/canvas.png"
canvas_image = Magick::Image.read(canvas_file_path).first

#Then perform the compositing operation.  This overlays your image on top of the canvas, center gravity ensures that your image is centered on the canvas.
canvas_image.composite!(<YOUR IMAGE>, CenterGravity, Magick::OverCompositeOp)

#then  write the file to a temporary file path so you can do something with it
temporary_file_path = "#{Rails.root}/tmp/#{@model.id}"
canvas_image.write(temporary_file_path)

Be sure to add the require statement in your file, pay close attention to the capitalization, it is RMagick not Rmagick

require "RMagick"

---

For reference here is the ImageMagick example from the documentation to perform the compositing operation that you will need

composite -gravity center smile.gif rose: rose-over.png

---

Rmagick Documentation on how to composite images - http://www.imagemagick.org/RMagick/doc/image1.html#composite

Rmagick Gem - https://github.com/rmagick/rmagick

ImageMagick reference to compositing - http://www.imagemagick.org/script/composite.php

Answer 2

I have a habit of answering my own questions of SO...

The following can be done with Dragonfly:

def thumb_url
  if image.width < 300 || image.height < 300
    image.convert('-background white -gravity center -extent 300x300').url
  else
    image.thumb('300x300#').url
  end
end