rails 头像上传

 在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| -%>
  "hidden" name="x1" id="x1" />
  "hidden" name="y1" id="y1" />
  "hidden" name="width" id="width" />
  "hidden" name="height" id="height" />

    "photo" src="<%= @photo.public_filename(:medium) %>" id="photo" />

  "preview">

  

  "submit" value="保存头像" />  

  "button" value="重新上传" οnclick="javascript:location.href='/photos/new'" w />  

<% end %>  

"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'  

    }  

  )  

  }  

);  

   

 

 

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

 

转自：http://www.cnblogs.com/orez88/articles/1670153.html