浏览 5350 次
精华帖 (0) :: 良好帖 (5) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2009-07-31
最后修改:2009-07-31
在rails上传头像的过程中,一般后端会采用rmagick/mini_magick进行裁剪,但会遇到一个这样的问题,如果用户上传的图片是极不规则的,那么最后裁剪的结果和原图片相去甚远,或者用户只需要该图片中的某一部分作为头像,所以用户不得不把图片ps后再上传,现在很多网站都有自定义头像上传,比如豆瓣就是先裁剪再让用户调整,之后再裁剪出用户满意的正方形头像,javascript-image-cropper-ui http://www.defusion.org.uk/ 就是这样的一个帮助你在客户端调整图片的js库,它基于prototype、scriptaculous、dragdrop等库,所以在rails使用它是很自然而然的事情,它支持很多种效果,其中最常用的就是Preview效果,就是在调整的过程中,同时出现预览效果,下面是我配合attachment_fu使用的例子。 :thumbnails => { :medium => '800x800>', :thumb => '100x100!' }
引用
<%= javascript_include_tag "lib/prototype", "lib/scriptaculous", "lib/builder", "lib/dragdrop", "lib/cropper"%>
<% 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
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间: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 路过完毕 |
|
返回顶楼 | |
发表时间:2009-08-17
最后修改:2009-08-17
http://blog.6thdensity.net/2009/02/05/reprocessing-attachment_fu-images-with-rmagick/
|
|
返回顶楼 | |
发表时间:2009-08-17
很好用的东东,太爽了,我还想知道 有没有相关类似的js处理图片的库,比如给图片加水印,我要在页面上移动文字(要加的水印),然后这个js可以像帖子中的那样传隐藏的文字在位置中的表单参数到server.
|
|
返回顶楼 | |
发表时间: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插件 |
|
返回顶楼 | |
发表时间:2010-02-12
javascript-image-cropper-ui官方网站上提供下载的1.2.1版本在IE8下不能正常工作,后来我用官方网站的demo上的js文件,则在IE8下正常工作.这事情郁闷了我好几天.
|
|
返回顶楼 | |