javascript-image-cropper-ui with 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| -%>
  <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/"[e-mail]_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/"[e-mail]_filename(:thumb)
    redirect_to photo_path(@photo)
end

 

评论

5 楼 yangzhihuan 2010-02-12  

javascript-image-cropper-ui官方网站上提供下载的1.2.1版本在IE8下不能正常工作,后来我用官方网站的demo上的js文件,则在IE8下正常工作.这事情郁闷了我好几天.

4 楼 Hooopo 2009-11-27  

rainchen 写道

jquery的用户话（比如在下），可以尝试用imgareaselect 配合本教程使用：    http://odyniec.net/projects/imgareaselect/

Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB

路过完毕

不错。。。正找呢！！发现豆瓣用的也是这个Jquery的imgAreaSelect插件

3 楼 机器人 2009-08-17  

很好用的东东，太爽了，我还想知道 有没有相关类似的js处理图片的库，比如给图片加水印，我要在页面上移动文字（要加的水印），然后这个js可以像帖子中的那样传隐藏的文字在位置中的表单参数到server.

2 楼 derk 2009-08-17  

http://blog.6thdensity.net/2009/02/05/reprocessing-attachment_fu-images-with-rmagick/

1 楼 rainchen 2009-08-03  

jquery的用户话（比如在下），可以尝试用imgareaselect 配合本教程使用：    http://odyniec.net/projects/imgareaselect/

Plugin features:
Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB

路过完毕