允许用户裁剪和调整图像 Ruby on Rails

Question

很抱歉这个相当笼统的问题，但我想知道是否有人对如何最好地允许用户裁剪和编辑他们自己的图像有任何建议。

我希望发生的事情是，当用户将他们的图像上传到我的应用程序上，以便该应用程序显示图像的副本时，覆盖层只允许固定的宽高比（可能是 4:3），然后用户会能够选择他们想要裁剪的图像区域并保存为他们的图像。

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

我已经研究了我认为需要的各种宝石和元素如下：

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

但是我还是有点不确定这些是如何组合在一起的。

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

Answer 1

要重现您指出的示例，您将需要一个前端部分和一个后端部分。

前端

所以要实现这一点，你需要一些前端交互工具。那里有很多，比如 Cropper.js 或 Croppie.

带有第 3 方宝石的后端

一旦您收到文件，以及如何裁剪图像的坐标，Carrierwave + ImageMagick 将起作用。

带有 ActiveStorage 的后端

在 Rails 5+ 中，Active Storage 也绝对可以用variant

 方法

做到这一点。

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

photo

.

class User < ActiveRecord
  has_one_attached :photo
end

然后，在您的控制器中，在接收 POST 的方法中，如果您使用的是 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

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