好久不见
原料
[Ruby on Rails - Railscasts PRO #182 Cropping Images ... - YouTube] 有此教程一步一步来就好，不能看的自行翻**墙
Jcrop 插件调用方法，可以参考官网案例
简要步骤
- 安装 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度的问题
核心代码是，'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 写法请参考本案例 全屏截图
- 由于图片加载太快，获取不到图片实际尺寸，怎么办？
为了这个问题，浪费了一下午，其实很简单，只需要等待图片加载完成再执行函数。
$('#cropbox').bind('load', function() {
// ....
});
- 遇到 $.Jscrop is not a function
JS 加载顺序问题，需要让 jq 与 Jcrop 比自己写的脚本提前加载，我遇到问题是项目 layout 所加载文件太多，解决方法layout: none,只加载自己需要的几个插件
