用蜻蜓导轨裁剪圆形图像答案

【问题标题】：Crop circular image with dragonfly rails用蜻蜓导轨裁剪圆形图像
【发布时间】：2013-12-26 23:40:34
【问题描述】：

我正在使用dragonfly ~> 0.9.15

给定一张图片，我很困惑如何使用蜻蜓中的转换方法从具有透明背景的图片中裁剪出圆形部分。

我可以使用直接图像魔法命令从命令行运行它，但我发现的示例命令使用实际文件，我不知道如何在蜻蜓动态处理文件时获取文件。

这是我使用 imagemagick 从堆栈溢出问题中得到的实际命令。

https://stackoverflow.com/a/999563/1664852

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

当我试图用蜻蜓实现同样的目标时，这是配置：

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

当它在服务器日志中运行时，我收到错误 no such image。

如何使用 imagemagick 命令为此配置convert 函数？

【问题讨论】：

也许你应该用 CSS 来做
最终这就是我所使用的，但它在旧浏览器中缺乏支持，这就是我需要服务器端图像处理位的原因。

标签： ruby-on-rails imagemagick imagemagick-convert dragonfly-gem

【解决方案1】：

也许我的解决方案可以帮助其他正在寻找使用 Dragonfly gem 生成圆形图像的方法。

我无法找到现成的解决方案，但我设法通过在这里和那里进行了一些尝试。

原来有一种非常简单的方法可以使用 ImageMagick (6.8.9-1) 使用晕影选项 explained here 制作圆形图像。

下面的命令行会生成一张背景透明的图片，并且图片是圆角的：

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

我们现在可以通过在 Dragonfly.rb 初始化器中添加一个 :rounded 处理器来获取头像的圆形图像，如下所示：

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

请注意，您可能需要根据您运行的平台更改转换命令的路径，我使用的是 Mac OS，而 ImageMagick 是通过 Homebrew 安装的。

现在，您可以从任何具有由 Dragonfly 处理的图像的模型调用：

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

返回一个 50 x 50 像素的圆形图像。

【讨论】：