Rails 3：动态裁剪图像的显示

Posted 2023-02-25

【中文标题】Rails 3：动态裁剪图像的显示

【英文标题】：Rails 3: cropping the display of an image on the fly

【发布时间】：2011-09-13 14:38:05

【问题描述】：

我想知道是否有人做过可以让用户即时更改图像显示裁剪的东西？

我想象的是用户上传了一张没有被裁剪的照片，当照片显示在他们的仪表板上时，他们可以选择“裁剪显示”选项并选择要显示的图像的矩形区域，但是，实际照片不会被裁剪，用户可以重复此操作并显示同一张照片的不同部分。任何人都做过这个或知道如何做到这一点？非常感谢！

【问题讨论】：

不是一个确切的答案，但您需要存储图像数据、起始 x 和 y 以及结束 x 和 y。然后您可以使用 css 根据这些保存的值定位图像。在创建界面方面，有多种选择。我建议考虑制作一个带边框的可调整大小的透明 div。 jqueryui.com/demos/resizable 也许使用类似的东西，并在用户第一次点击的 x&y 处创建 div。只需使用示例中的颜色使 div 透明即可。

【参考方案1】：

Dragonfly 会这样做。

这是一个 Rack 框架，其主要特点之一是动态图像处理。基本用法：

class Album < ActiveRecord::Base
  image_accessor :cover_image
end

<%= image_tag @album.cover_image.url %>
<%= image_tag @album.cover_image.thumb('400x200#').url %>
<%= image_tag @album.cover_image.jpg.url %>
<%= image_tag @album.cover_image.process(:greyscale).encode(:tiff).url %>

为了使您的示例正常工作，您当然可以使用任何裁剪工具并将参数传递给服务器以创建多个可重复使用的“裁剪”或其他视图（注意灰度等）。

【参考方案2】：

您可以将此 jquery 插件用作接口 http://code.google.com/p/jcrop/，并且您应该观看此 railscast：http://railscasts.com/episodes/182-cropping-images 以了解它是如何“在幕后”工作的:)