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

Question

对于这个相当普通的问题很抱歉,但我想知道是否有人建议如何最好地允许用户裁剪和编辑自己的图像.

我想要发生的是,当用户在我的应用程序上传他们的图像以便应用程序显示图像的副本时,覆盖图只允许固定的宽高比(可能是4:3),那么用户就能够选择要裁剪的图像区域并保存为图像.

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

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

Carrierwave - 对于文件上传(我觉得裁剪 - 纠正我,如果我错了)的ImageMagick /迷你Magick/Rmagick - 处理处理图像.

但是我仍然不确定这些是如何组合在一起的.

人们对宝石的最佳组合以及它们如何协同工作以获得这种裁剪功能的任何建议都将非常感激.

Answer 1

请点击此链接http://railscasts.com/episodes/182-cropping-images?view=asciicast 我会帮你的很多

Answer 2

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

前端

因此，要实现这一目标，您需要一些前端交互工具。有很多，比如Cropper.js或Croppie。

带有第 3 方 gem 的后端

一旦您收到文件以及如何裁剪图像的坐标，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

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