javascript-image-cropper-ui with rails-优快云博客

本文介绍如何在Rails应用中实现用户自定义头像裁剪功能，利用JavaScript-image-cropper-ui库在前端提供直观的图片裁剪界面，并通过Attachment_fu及RMagick在后端处理图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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| -%>
  <input type="hidden" name="x1" id="x1" />
  <input type="hidden" name="y1" id="y1" />
  <input type="hidden" name="width" id="width" />
  <input type="hidden" name="height" id="height" />
  <p>
    <img alt="photo" src="<%= @photo.public_filename(:medium) %>" id="photo" />
  </p>
  <div id="preview"></div><br />
  <input type="submit" value="保存头像" />
  <input type="button" value="重新上传" onclick="javascript:location.href='/photos/new'" w />
<% end %>
<script type="text/javascript" charset="utf-8">
  function onEndCrop( coords, dimensions ) {
    $( 'x1' ).value = coords.x1;
    $( 'y1' ).value = coords.y1;
    
    $( 'width' ).value = dimensions.width;
    $( 'height' ).value = dimensions.height;
  }
  Event.observe(
  window, 'load',
  function() {
    new Cropper.ImgWithPreview(
    'photo',
    {
      minWidth: 100,
      minHeight: 100,
      ratioDim: { x:100, y: 100 },
      displayOnInit: true,
      onEndCrop: onEndCrop,
      previewWrap: 'preview'
    }
  )
  }
);
</script>

def update
    @photo = Photo.find params[:id]
    img = Magick::Image::read(File.expand_path(RAILS_ROOT)+"/public/"+@photo.public_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/"+@photo.public_filename(:thumb)
    redirect_to photo_path(@photo)
end