好久不見
原料
[Ruby on Rails - Railscasts PRO #182 Cropping Images ... - YouTube] 有此教程一步一步來就好，不能看的自行翻**墻
Jcrop 插件調(diào)用方法馋艺，可以參考官網(wǎng)案例
簡(jiǎn)要步驟
- 安裝 Gem
# 在 Gemfile中添加一行 gem CarrierWave # 也許需要先安裝本地套件 gem Rmagick - 生成 Uploader
# 在項(xiàng)目文件夾下運(yùn)行命令 rails g Uploader image - View
<%= simple_form_for @user, :html => {:multipart => true} do |f| %>
<%= f.file_format :photo, :label => 'Your avatar please' %>
<% end %>
Jcrop 使用參數(shù)
$.Jcrop('#cropbox').setOptions({
aspectRatio: 4/3, // 設(shè)置比例
setSelect: [0, 0, 400, 300], // 默認(rèn)大小
onSelect: fill, // 選擇后事件
onChange: fill,
allowSelect: false //是否允許取消選框
});
- 添加 Uploader 兩種樣式，并添加 :crop 預(yù)處理
- 控制器中判斷是否第一次上傳圖片甲脏，渲染 crop.html.erb 頁面
- 實(shí)現(xiàn)全屏預(yù)覽剪裁
- 添加刪除按鈕
實(shí)踐過程中遇到的幾個(gè)坑
- 安裝 'rmagick' 插件報(bào)錯(cuò)
# 對(duì)于 Linux 系統(tǒng)
sudo apt-get install imagemagick libmagickcore-dev libmagickwand-dev
# Mac 系統(tǒng)
brew install imagemagick
# 本地安裝完成后眶熬，gem 'rmagick' 成功
剪裁后，總看不到效果
查看下Uploader中設(shè)定的模板名稱块请，調(diào)用結(jié)果的時(shí)候需要使用 image_url[:yourmode]遇到 iphone 圖片娜氏，豎版反轉(zhuǎn) 90度的問題
核心代碼是，'rmagick' 處理照片前墩新，將其按照 exif 進(jìn)行旋轉(zhuǎn)
def auto_orient
manipulate! do |img|
img = img.auto_orient
end
end
截圖前都要調(diào)用
version :thumb do
process :auto_orient
process :crop
process :resize_to_fill => [400, 300]
end
如何在觸屏上使用贸弥？
請(qǐng)下載最新版 Jcrop如何全屏截圖，即將圖片寬度等比放大海渊，且保證截圖精準(zhǔn)茂腥，需要修改下源碼，將 Jcrop 讀取圖片源碼部分切省，改為返回圖片樣式尺寸
JS 寫法請(qǐng)參考本案例 全屏截圖
- 由于圖片加載太快，獲取不到圖片實(shí)際尺寸帕胆，怎么辦朝捆？
為了這個(gè)問題，浪費(fèi)了一下午懒豹，其實(shí)很簡(jiǎn)單芙盘，只需要等待圖片加載完成再執(zhí)行函數(shù)。
$('#cropbox').bind('load', function() {
// ....
});
- 遇到 $.Jscrop is not a function
JS 加載順序問題脸秽，需要讓 jq 與 Jcrop 比自己寫的腳本提前加載儒老，我遇到問題是項(xiàng)目 layout 所加載文件太多，解決方法layout: none,只加載自己需要的幾個(gè)插件
