好久不见
)

原料

简要步骤

  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
    8
     $.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度的问题

  • 解决IPHONE竖版照片截取错误

    核心代码是，’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,只加载自己需要的几个插件

其他参考资料