好久不见
)

原料

简要步骤

  1. 安装 Gem

    1
    2
    3
    4
    # 在 Gemfile中添加一行
    gem CarrierWave
    # 也许需要先安装本地套件
    gem Rmagick
  2. 生成 Uploader

    1
    2
    # 在项目文件夹下运行命令
    rails g Uploader image
  3. View

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

    Jcrop 使用参数

    1
    2
    3
    4
    5
    6
    7
     $.Jcrop('#cropbox').setOptions({
    aspectRatio: 4/3, // 设置比例
    setSelect: [0, 0, 400, 300], // 默认大小
    onSelect: fill, // 选择后事件
    onChange: fill,
    allowSelect: false //是否允许取消选框
    });
  4. 添加 Uploader 两种样式,并添加 :crop 预处理

  5. 控制器中判断是否第一次上传图片,渲染 crop.html.erb 页面
  6. 实现全屏预览剪裁
  7. 添加删除按钮

实践过程中遇到的几个坑

  1. 安装 ‘rmagick’ 插件报错

    1
    2
    3
    4
    5
    # 对于 Linux 系统
    sudo apt-get install imagemagick libmagickcore-dev libmagickwand-dev
    # Mac 系统
    brew install imagemagick
    # 本地安装完成后,gem 'rmagick' 成功
  2. 剪裁后,总看不到效果
    查看下 Uploader 中设定的模板名称,调用结果的时候需要使用 image_url[:yourmode]

  3. 遇到 iphone 图片,竖版反转 90度的问题

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

    1
    2
    3
    4
    5
    def auto_orient
    manipulate! do |img|
    img = img.auto_orient
    end
    end

截图前都要调用

1
2
3
4
5
version :thumb do
process :auto_orient
process :crop
process :resize_to_fill => [400, 300]
end

  1. 如何在触屏上使用?
    请下载最新版 Jcrop

  2. 如何全屏截图,即将图片宽度等比放大,且保证截图精准,需要修改下源码,将 Jcrop 读取图片源码部分,改为返回图片样式尺寸

    JS 写法请参考本案例 全屏截图

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

    1
    2
    3
    $('#cropbox').bind('load', function() {
    // ....
    });
  4. 遇到 $.Jscrop is not a function
    JS 加载顺序问题,需要让 jq 与 Jcrop 比自己写的脚本提前加载,我遇到问题是项目 layout 所加载文件太多,解决方法 layout: none,只加载自己需要的几个插件

其他参考资料