# 图片上传插件

# CarrierWave

安装 Gem

# 在 Gemfile中添加一行
gem CarrierWave
# 也许需要先安装本地套件
gem Rmagick

生成 Uploader

# 在项目文件夹下运行命令
rails g Uploader image

View

<%= simple_form_for @user, :html => {:multipart => true}  do |f| %>
    <%= f.file_format :photo, :label => 'Your avatar please' %>
 <% end %>

Jcrop 使用参数

$.Jcrop('#cropbox').setOptions({
   aspectRatio: 4/3, // 设置比例
   setSelect: [0, 0, 400, 300], // 默认大小
   onSelect: fill, // 选择后事件
   onChange: fill,
   allowSelect: false //是否允许取消选框
});

添加 Uploader 两种样式，并添加 :crop 预处理
控制器中判断是否第一次上传图片，渲染 crop.html.erb 页面
实现全屏预览剪裁
添加删除按钮

# 实践过程中遇到的几个坑

安装 'rmagick' 插件报错

# 对于 Linux 系统
sudo apt-get install imagemagick libmagickcore-dev libmagickwand-dev
# Mac 系统
brew install imagemagick
# 本地安装完成后，gem 'rmagick' 成功

剪裁后，总看不到效果查看下 Uploader 中设定的模板名称，调用结果的时候需要使用 image_url[:yourmode]
遇到 iphone 图片，竖版反转 90度的问题

解决IPHONE竖版照片截取错误 (opens new window)

核心代码是，'rmagick' 处理照片前，将其按照 exif 进行旋转

 def auto_orient
    manipulate! do |img|
      img = img.auto_orient
    end
  end

截图前都要调用

version :thumb do
  process :auto_orient
  process :crop
  process :resize_to_fill => [400, 300]
end

如何在触屏上使用？请下载最新版 Jcrop
如何全屏截图，即将图片宽度等比放大，且保证截图精准，需要修改下源码，将 Jcrop 读取图片源码部分，改为返回图片样式尺寸

JS 写法请参考本案例全屏截图 (opens new window)

由于图片加载太快，获取不到图片实际尺寸，怎么办？为了这个问题，浪费了一下午，其实很简单，只需要等待图片加载完成再执行函数。

$('#cropbox').bind('load', function() {
    // ....
    });

遇到 $.Jscrop is not a function JS 加载顺序问题，需要让 jq 与 Jcrop 比自己写的脚本提前加载，我遇到问题是项目 layout 所加载文件太多，解决方法 layout: none,只加载自己需要的几个插件

# 其他参考资料

← Helper相关插件运行环境 →