在rails上传头像的过程中，一般后端会采用rmagick/mini_magick进行裁剪，但会遇到一个这样的问题，如果用户上传的图片是极不规则的，那么最后裁剪的结果和原图片相去甚远，或者用户只需要该图片中的某一部分作为头像，所以用户不得不把图片ps后再上传，现在很多网站都有自定义头像上传，比如豆瓣就是先裁剪再让用户调整，之后再裁剪出用户满意的正方形头像，javascript-image-cropper-ui http://www.defusion.org.uk/ 就是这样的一个帮助你在客户端调整图片的js库，它基于prototype、scriptaculous、dragdrop等库，所以在rails使用它是很自然而然的事情，它支持很多种效果，其中最常用的就是Preview效果，就是在调整的过程中，同时出现预览效果，下面是我配合attachment_fu使用的例子。
1 在model中定义裁剪参数，其中thumb是最终需要的图片
:thumbnails => { :medium => '800x800>', :thumb => '100x100!' }
2 下载cropper，http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/，将lib文件夹以及cropper.css拷贝到javascripts文件夹下面，之后在layout中
引用
<%= javascript_include_tag "lib/prototype", "lib/scriptaculous", "lib/builder", "lib/dragdrop", "lib/cropper"%>
3 头像上传略，上传完毕后跳转到头像编辑页面
<% form_for @photo, :method => :put do |f| -%>
 %>)
<% end %>
def update
@photo = Photo.find params[:id]
img = Magick::Image::read(File.expand_path(RAILS_ROOT)+"/public/"[email protected]_filename(:medium)).first
img.crop!(::Magick::CenterGravity, params[:x1].to_i, params[:y1].to_i,
params[:width].to_i, params[:height].to_i, true)
img.write File.expand_path(RAILS_ROOT)+"/public/"[email protected]_filename(:thumb)
redirect_to photo_path(@photo)
end
- 查看图片附件