rails 头像上传
来源:互联网 发布:淘宝网中老年女装外套 编辑:程序博客网 时间:2024/06/06 02:46
在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是最终需要的图片
<%= javascript_include_tag "lib/prototype", "lib/scriptaculous", "lib/builder", "lib/dragdrop", "lib/cropper"%>
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
转自:http://www.cnblogs.com/orez88/articles/1670153.html
0 0
- rails 头像上传
- rails 头像上传
- 上传头像
- 上传头像
- 上传头像
- 上传头像
- 头像上传
- 上传头像
- 头像上传
- 头像上传
- 头像上传
- 上传头像
- 上传头像
- 头像上传
- 头像上传
- 上传头像
- 头像上传
- 上传头像
- 百善孝为先,原心不原迹,原迹贫家无孝子;万恶淫为首,论迹不论心,论心世上少完人。
- php curl 请求下载文件,以及同时向接口发送参数和文件
- IOCP九:Client退出后投递WSASend
- Lession 6 集合框架
- 系统设置内添加应用设置Setting的实现
- rails 头像上传
- 活动指示器(UIActivityIndicatorView)
- java 实现mysql数据库备份与还原
- Lession 7 集合框架
- hdu4973 线段树(题目不错,用了点,段,更新查找还有DFS)
- python命令行参数解析示例应用
- UniSky入门资料
- android4.4 Browser 浏览器模式选项 默认值修改
- tinyxml linux下编译动态库