Rails 实现截图，使用 CarrierWave + Jcro

好久不见

原料

• [Ruby on Rails - Railscasts PRO #182 Cropping Images ... - YouTube] 有此教程一步一步来就好，不能看的自行翻**墙

• Jcrop 插件调用方法，可以参考官网案例

• 本人实现案例，进入主页点击 Gallery可以使用

简要步骤

1. 安装 Gem

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

2. 生成 Uploader

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

3. 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 //是否允许取消选框
});

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

实践过程中遇到的几个坑

1. 安装 'rmagick' 插件报错

# 对于 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 进行旋转

 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

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

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

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

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

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

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

其他参考资料

• 添加预览效果
• Cannot render console to 192.168.1.5
• 解决竖版照片思路
• 全屏剪裁