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/"[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
