让rails处理图片再简单一点

      先来看看rails处理图片的过程吧，用户上传图片，首先要校验图片的格式，重命名用户提交的图片，保存至上传的目录，或许你会用file-column帮你简化一些工作，如果你对上传的图片大小有特别的要求，或许你又会找来RMagick来对图片进行裁剪再保存，在图片进行显示的时候，或许在某个地方图片要显示的大小尺寸和你之前裁剪的不一致，你又要写js代码来做等比缩放，那么有没有一种一次到位的方法呢？下面给大家推荐一款rails非常棒的插件-fleximage，基本可以帮你搞定所有的关于图片的那些事儿，以下是我初步使用fleximage后所了解到的一些特性：

 

  1 使用配置非常简单，基本不用写任何关于图片处理的代码！

  2 能够帮你校验图片的有效格式

  3 图片上传前可以与处理图片的格式和大小

  4 图片显示时仍可以裁剪成你所需要的格式和大小

  5 图片显示时可以加上一些效果，比如边框 颜色 标题

  6 图片在显示可以轻松进行格式转换

   ………………

下面让我们一步步来享受fleximage给我提供的好处吧：）

 

1 安装，ruby script/plugin install http://github.com/Squeegy/fleximage.git，貌似要求你的项目要在svn的控制下才可以安装，不过没关系，我会把插件放在附件中，直接拷到你的项目中即可。

 

2 建立与图片相关的model,在这里配置图片的上传目录，你无需去建这个目录，fleximage会自动生成，另外还有图片的预处理信息，比如图片格式、大小、是否必须等等，这些属性非常容易理解，如下：

 

class Picture < ActiveRecord::Base
  acts_as_fleximage :image_directory => 'public/upload'
  use_creation_date_based_directories true
  image_storage_format :jpg
  require_image true
  missing_image_message  'is required'
  invalid_image_message 'was not a readable image'
  default_image_path 'public/images/rails.png'
  output_image_jpg_quality  85
  preprocess_image do |image|
   image.resize '200x300'
  end
end

 

 

3 上传图片，首先在路由中加上：map.resources :pictures，这里view中采用form_for标签,你也可以用普通form，但保证表单输入项和model属性对应起来。pictures控制器和提交图片的表单分别如下：

 

 

def new 
   @picture = Picture.new 
end 

def create 
   @picture = Picture.new params[:picture] 
   if @picture.save 
      redirect_to :action => "new" 
   else flash[:notice] = '图片无效!' 
       render :action => 'new'
   end
 end 

 

<%= flash[:notice] if flash[:notice] %> 
<% form_for @picture, :url => { :action => "create" } , :html => { :multipart => true } do |f| %> 
   <p> <b>标题</b><br /> <%= f.text_field :title %> </p> 
   <p> 
     <b>上传图片</b><br /> <%= f.file_field :image_file %>
     <br /> or URL: 
     <%= f.text_field :url %> 
   </p> 
   <p> <%= f.submit "创建" %> </p> 
<% end %> 

 

 4 上传图片后会发现，在图片的上传目录下会有一个名字和数据库中保存的的新建记录id相同的图片，下面来显示它吧，在这里你可以再次定制你的图片显示效果，显示的图片是用fleximage自己的模板渲染的，该模板的命名是采用需要渲染图片的action的名字加上需要图片显示的格式再加flexi，比如show.jpg.flexi，这是约定好的，fleximage会自动拿它渲染需要在rails模板中显示的图片。模板分别如下：

 

rails模板：

<p> <%= image_tag formatted_picture_path(@picture, :gif) %> </p>

 

 fleximage模板：

@picture.operate do |image| end 

 

让我们看看效果吧：

 

 

5 现在发现我想把图片放大一点，还要用gif格式进行显示，并且加上边框 标题 颜色等，那在建一个fleximage模板来专门处理gif格式的图片，修改之前的视图如下：

 

 

<p>
  <%= image_tag formatted_picture_path(@picture, :gif) %>
</p>


@picture.operate do |image|
    image.resize '280x280:crop => true
    image.border :size => 20, :color => 'green'
    image.text 'I am DHH'
    image.unsharp_mask
    image.shadow
 end

 

效果如下：