如何通过Imagemagick命令行及Rails ActiveStorage Variant实现图片居中裁剪

我刚好处理过类似的需求，在Rails 5.2的ActiveStorage里，结合ImageMagick的参数就能完美实现任意比例居中裁剪，不管原图是横向还是纵向。核心是利用resize的缩放规则配合gravity和extent参数。

核心实现代码 #

假设你需要裁剪成16:9比例的800x450图片，直接在视图里这样写：

<%= image_tag @photo.image.variant(
  resize: "800x450^",
  gravity: "center",
  extent: "800x450"
) %>

参数解释 #

• resize: "800x450^"：这里的^是关键，它告诉ImageMagick按比例缩放图片，确保图片的宽和高都不小于目标尺寸。比如原图是竖版的9:16，缩放后宽度会达到800，高度会超过450；如果原图是横版的4:3，缩放后高度会达到450，宽度会超过800，这样能保证裁剪区域完全被图片覆盖，不会出现黑边。
• gravity: "center"：设置裁剪的基准点为图片中心，这样裁剪出来的内容是原图的中间区域。
• extent: "800x450"：把缩放后的图片裁剪到指定的宽高尺寸，结合gravity就实现了居中裁剪。

动态适配不同比例和尺寸 #

如果需要支持多种比例（比如16:9、4:3、1:1），可以在模型里封装一个辅助方法，让代码更简洁：

# app/models/photo.rb
class Photo < ApplicationRecord
  has_one_attached :image

  # 生成指定比例和宽度的居中裁剪图
  def cropped_variant(ratio, target_width)
    target_height = case ratio
                    when "16:9" then (target_width * 9 / 16).to_i
                    when "4:3" then (target_width * 3 / 4).to_i
                    when "1:1" then target_width
                    else target_width # 默认按正方形处理
                    end

    image.variant(
      resize: "#{target_width}x#{target_height}^",
      gravity: "center",
      extent: "#{target_width}x#{target_height}"
    )
  end
end

然后在视图里调用：

<%# 16:9比例，宽度800 %>
<%= image_tag @photo.cropped_variant("16:9", 800) %>

<%# 4:3比例，宽度600 %>
<%= image_tag @photo.cropped_variant("4:3", 600) %>

<%# 1:1正方形，宽度500 %>
<%= image_tag @photo.cropped_variant("1:1", 500) %>

额外注意事项 #

1. 确保ImageMagick已安装：ActiveStorage依赖ImageMagick处理图片，服务器上需要先安装。可以通过convert -version命令检查是否安装成功。
2. Retina屏适配：如果需要支持Retina屏，可以生成2倍尺寸的图片，然后在image_tag里指定显示尺寸：

   <%= image_tag @photo.cropped_variant("16:9", 1600), size: "800x450" %>
   

3. 其他效果扩展：如果需要给裁剪后的图片加圆角、水印等效果，可以直接在variant里追加参数，比如：

   image.variant(
     resize: "800x450^",
     gravity: "center",
     extent: "800x450",
     round_corner: "20x20" # 添加圆角
   )
   

内容的提问来源于stack exchange，提问作者spong