利用 File_column 來做到縮圖

圖片上傳，縮圖製作這幾個功能可以說是 Web App 做到爛掉的東西，我們之前遇到縮圖，都是使用我們公司 Team 自己開發的 RMagick Image Upload API。當我最近著手 某個 Project 的時候，我想說「既然大家都推薦 File Column ，我這次不用自己寫的 API ，也來用用看 File Column 好了」。一不用則以，一用 File Column ，我還是感到相當的 shock.....................

「怎麼可能，製作縮圖怎麼可能可以做到那麼簡單。」

File Column 就是一個結合 Rmagick ，並且將圖片依照自己的機制存在 public 資料夾下面的 Plugin，License 是 MIT 。下列範例直接抄 File_column 的範例，小技巧來自airport 的 整合File-Column和Rmagick功能实现图片上传。

安裝

因為 file column 是基於 Rmagick，所以必須先安裝 Rmagick。安裝好 Rmagick 之後可以到file column 官方網站下載 tarball ，或是直接使用 plugin 安裝

 ./script/plugin install
http://opensvn.csie.org/rails_file_column/
plugins/file_column/trunk

基本上傳

1. 設定

首先，你必須在某個 Model 加入一個 column，這裡叫 Entry Model ，Column 叫做 image 好了。

   class Entry < ActiveRecord::Base
file_column :image
end

好，這樣已經把設定弄好了。

2. 上傳圖片的 Form Helper

以前 image upload 都是用

    <%= file_field "entry", "image" %>

現在請在 view 裡面使用 file_column_field

    <%= file_column_field "entry", "image" %>

3. 顯示圖片

要顯示圖片，還是使用 image_tag 來顯示，不過 image url 必須採用 url_for_file_column

    <%= image_tag( url_for_file_column("entry", "image") ) %>

4. 完成

如何，file column 真的很簡單吧。設定，顯示，上傳都各一行即可。


縮圖

但是上面的功能只能說基本，要夠好用，必須可以做到縮圖。要作縮圖的時候，上傳 file_column_field 完全沒有任何改變，所以這裡就不解釋。

1. 設定

設定方面，你加入你想要加入的縮圖 size ，我這邊設三種縮圖的版本，最小的縮圖是 thumb 25x25 ，medium 是 150x150，large是 300x300 。

   class Entry < ActiveRecord::Base
file_column :image , :magick => {
  :versions => { "thumb" => "25x25", "medium" => "150x150" , "large" => "300x300" }
   }
end

2. 顯示圖片

要顯示縮圖的圖片，只需要加入剛剛作縮圖的版本，剛剛設定的是 thumb, medium, large

Thumb:

    <%= image_tag( url_for_file_column("entry", "image", "thumb" ) ) %>

Medium：

    <%= image_tag( url_for_file_column("entry", "image", "medium" ) ) %>

Large：

    <%= image_tag( url_for_file_column("entry", "image", "large" ) ) %>

原圖:

    <%= image_tag( url_for_file_column("entry", "image") ) %>

小技巧

這邊還有出自airport 的 整合File-Column和Rmagick功能实现图片上传 的一些小技巧
"thumb" => "25x25!" : ! 代表就是要縮成 25x25 ，也就是會根據這個比例作破壞性的壓縮
"thumb" => "25x25>" : > 代表假設這個圖本身就小於 25x25，就不作縮圖了。

如果要限制上傳的圖形格式，就使用 validate_format_of 即可

  class Entry < ActiveRecord::Base
 validates_format_of :image, :with=>/^.*(.jpg|.JPG|.gif|.GIF)$/
  file_column :image , :magick => {
   :versions => { "thumb" => "25x25", "medium" => "150x150" , "large" => "300x300" }
   }
end

file column 上傳的圖片到哪裡去了

如果 Model 已經 save 好了，你可以仔細看看 public 資料夾，裡面找你使用 file column 的 Model 名字的資料夾，你會發現他放到那個資料夾的 image 資料夾下面去了，裡面每個資料夾都是某個 model emtry 的 id。在這裡的例子裡，Entry model 的 image 是他會放到 public/entry/image/ 底下。

如果是image 已經上傳到 Server，Model 還沒有 save 的情況，他會放在 public/entry/image/tmp/ 底下。


延伸閱讀

• File Column 官方網頁
  
• 整合File-Column和Rmagick功能实现图片上传