允许用户裁剪和调整大小图片 Ruby on Rails

Question

非常抱歉，这个问题比较泛泛，但我想知道是否有任何建议可以让用户最好地裁剪和编辑自己的图像。

我希望的是，当用户在我的应用程序上上传他们的图像时，应用程序会显示一个图像副本，并覆盖一个只允许固定宽高比（例如4：3）的区域，然后用户可以选择要裁剪的图像区域并将其保存为自己的图像。

我能想到的最好的例子就是在Facebook上裁剪封面照片。

我已经研究了各种Gems和元素，如下所示：

Carrierwave-用于文件上传（我认为还包括裁剪-如果我错了请纠正我） ImageMagick/Mini-Magick/Rmagick- 处理图像的处理工具。

然而，我仍然有点不确定它们如何结合在一起。

任何人对实现此裁剪功能的最佳gems组合以及它们如何协同工作的建议都将不胜感激。

- Tom Pinchen

Answer 1

为了重现你指出的示例，你需要前端部分和后端部分。

前端

所以为了实现这一点，你需要一些前端交互工具。市面上有很多选择，比如 Cropper.js 或 Croppie。

使用第三方 Gem 的后端

一旦你收到文件和剪切图像的坐标，Carrierwave + ImageMagick 就可以运行。

使用 ActiveStorage 的后端

在 Rails 5+ 中, Active Storage 也绝对能够做到, 使用 variant 方法。

例如，您有一个带有附件photo的模型。

class User < ActiveRecord
  has_one_attached :photo
end

然后，在您的控制器中，如果您正在使用Cropper.js，例如：

def add_picture
  @user.update(params.require(:user).permit(:photo))
  @user.photo.variant(crop: cropping_dimensions)
end

private

def cropping_dimensions
  received = JSON.parse(params[:cropping])
  sprintf(
    "%fx%f%+f%+f",
    received[:width],
    received[:height],
    received[:x],
    received[:y]
  )
end

在Rails 7中，Active Storage变体方法默认使用Vips。

- Capripot