让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]
    @picture.update_time = Time.now
    @picture.create_time = Time.now
    if @picture.save
      redirect_to :action => "new"
    else
      flash[:notice] = 'Your photo did not pass validation!'
      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 '400x400', :crop => true
    image.border :size => 20, :color => 'green'
    image.text 'I am DHH'
    image.unsharp_mask
    image.shadow
 end
 
效果如下：

 

  
  

    
      
        

          
fleximage.git.rar (669.7 KB)
          
          
下载次数: 542
        
      
    
    
  



  

    
    
分享到：
      
      
    
  

  

    

      10分钟给一个rails遗留系统添加标签功能
      |
      分享一款word风格的rails在线编辑器
    
  
  

    

      
2008-07-14 18:25
      
浏览 3059
      
评论(35)
       
论坛回复 / 浏览 (34 / 22955)
 
      
            
      
查看更多
    
    
  
    
  

    
评论
    
    

  

    15 楼
    godfox
    2008-08-22  
    
    
  
  
<div class='quote_title'>liuqiang 写道</div>
<div class='quote_div'>
<div class='quote_title'>godfox 写道</div>
<div class='quote_div'>问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？</div>
<p> </p>
<p> 发帖不看回复。</p>
<p> </p>
<p>&lt;%= image_tag formatted_picture_path(@picture, :gif) %&gt; <br/>注意这句，model中已经配置了图片的目录地址，@picture中存有图片名，看源码可知是采用图片的id做名字的，再加上你的主域名，就是该图片的url </p>
</div>
<p>谢谢回复啊，我的意思是这样的，Pictrure 这个模型 对应 的数据表的字段是什么？有了对应的字段，才能把对应的图片信息保存吧，但我看到文档里定义的模型，</p>
<p>都没有任何相关的定义</p>
<pre name='code' class='ruby'>   class Picture &lt; ActiveRecord::Base  
     acts_as_fleximage :image_directory =&gt; '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   </pre>
<p> 不好意思，刚刚学习rails，麻烦解答一下</p>



  

    14 楼
    liuqiang
    2008-08-22  
    
    
  
  
<div class='quote_title'>godfox 写道</div>
<div class='quote_div'>问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？</div>
<p> </p>
<p> 发帖不看回复。</p>
<p> </p>
<p>&lt;%= image_tag formatted_picture_path(@picture, :gif) %&gt; <br/>注意这句，model中已经配置了图片的目录地址，@picture中存有图片名，看源码可知是采用图片的id做名字的，再加上你的主域名，就是该图片的url </p>



  

    13 楼
    godfox
    2008-08-22  
    
    
  
  
问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？



  

    12 楼
    qianjigui
    2008-08-17  
    
    
  
  
先下载了,有机会会好好研究的.谢谢!



  

    11 楼
    freeport
    2008-08-04  
    
    
  
  
我上传之后，图片路径是pictures/2008/4/3.jpg

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

他是http://127.0.0.1:3000/pictures/3.jpg

???



  

    10 楼
    liuqiang
    2008-08-04  
    
    
  
  
<%= image_tag formatted_picture_path(@picture, :gif) %> 

 



注意这句，model中已经配置了图片的目录地址，@picture中存有图片名，看源码可知是采用图片的id做名字的，再加上你的主域名，就是该图片的url



  

    9 楼
    freeport
    2008-08-03  
    
    
  
  
url 怎么设置呢???



  

    8 楼
    liuqiang
    2008-07-29  
    
    
  
  
shaka 写道
图片保存的是二进制还是文本？

数据库存的是路径，图片最终要是进文件夹里面呆着





  

    7 楼
    shaka
    2008-07-29  
    
    
  
  
图片保存的是二进制还是文本？



  

    6 楼
    liuqiang
    2008-07-28  
    
    
  
  
<p> </p>
<div class='quote_title'>leon0122 写道</div>
<div class='quote_div'>我按照上面的步骤做的时候，生成model picture就会报错： <br/>ERROR :: FlexImage requires the RMagick gem. http://rmagick.rubyforge.org/install-faq.html <br/>ERROR :: FlexImage requires the RMagick gem. http://rmagick.rubyforge.org/install-faq.html <br/>我用的是netbeans6.0 <br/>不知道楼主用的rails是什么版本的？？ <br/>我也下载了rmagick-2.5.2.gem 也不行，不知道是不是版本的问题</div>
<p> </p>
<p> 我用的是rails 2.0.2/nb6.1，RMagick是2.0，不过我当时没遇到什么问题， </p>
<p>你是第二步出错的吗？先重启服务器 or 重启电脑试试？</p>
<p> </p>



  

    5 楼
    leon0122
    2008-07-28  
    
    
  
  
我按照上面的步骤做的时候，生成model  picture就会报错：

ERROR :: FlexImage requires the RMagick gem.  http://rmagick.rubyforge.org/install-faq.html

ERROR :: FlexImage requires the RMagick gem.  http://rmagick.rubyforge.org/install-faq.html

我用的是netbeans6.0

不知道楼主用的rails是什么版本的？？

我也下载了rmagick-2.5.2.gem 也不行，不知道是不是版本的问题



  

    4 楼
    luodongju325
    2008-07-18  
    
    
  
  
为什么我会出现这样的错误:uninitialized constant Magick::Geometry



  

    3 楼
    0701
    2008-07-18  
    
    
  
  
可以考虑把图片上传全部改用fleximage做了



  

    2 楼
    liuqiang
    2008-07-17  
    
    
  
  
在图片显示的时候做了处理，估计是生成了js对图片做了处理。

这个东西非常好用，口碑也不错，强烈推荐使用





  

    1 楼
    yangzhihuan
    2008-07-16  
    
    
  
  
这倒是个好东西。对于这个有个问题：
# @picture.operate do |image|  
#     image.resize '400x400', :crop => true  
#     image.border :size => 20, :color => 'green'  
#     image.text 'I am DHH'  
#     image.unsharp_mask  
#     image.shadow  
#  end  

这里只是对图片在展示的时候进行了处理，还是对原图片进行了修改（或者是为这个样式生成了新图片），不太清楚。



    
    
« 上一页 1 2 下一页 »