2008-07-14

让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
 


效果如下：




 

  

  
  

  
    
      
    
  


              
  

    
  

  
  
  
              
  

    
评论

    
    

  

    MaiKuraki
    2008-09-10  
    回复
    
  

  
qichunren 写道
qichunren 写道


它是在图片显示的时候在内存中进行处理的，不过这样也带来一个问题，第次显示图片都要用RMagick进行图片处理，加大了服务器的压力。有时这样处理是不是更好：我既要显示一个缩略图，又要原图，用以前的方法是直接在服务器上生成了一个缩略图，图片第次显示的时候直接显示缩略图原样，服务器不用即时处理，这样是不是好一些？ 



我今天弄了一下午的这个Fleximage，给我的感觉就是方便级了，不过我是不会使用这个插件的，好失望。



这个插件方便所带来的问题就是性能！



每次action render那个show.png.flexi模板时，好花费时间啊。

就如我上面用Product展示这个例子吧，在商品列表页面，我要显示一个小的略略图(我用gif来显示小图，然后在商品详细页面使用JPG显示大图)，

有这样的一列：<td><%= image_tag formatted_product_path(product, :gif) %></td>



如果index页面的@products的size为10（现实情况中可以这个数字大得多），我查看log，一共请求了11次，那10次请求就是用来处理生成图片缩略图（请求show.gif.flexi模板），这样下来真的是不划算啊，我每次打开index页面，明显看到ff的进度条在不断向前推进，那就是在处理图片啊。



所以还是放弃这个插件，哎，无奈！



file_column和attach_fu，不知道哪一个会好一点。






cache了没有？？？





  

    qichunren
    2008-08-29  
    回复
    
  

  
qichunren 写道


它是在图片显示的时候在内存中进行处理的，不过这样也带来一个问题，第次显示图片都要用RMagick进行图片处理，加大了服务器的压力。有时这样处理是不是更好：我既要显示一个缩略图，又要原图，用以前的方法是直接在服务器上生成了一个缩略图，图片第次显示的时候直接显示缩略图原样，服务器不用即时处理，这样是不是好一些？ 



我今天弄了一下午的这个Fleximage，给我的感觉就是方便级了，不过我是不会使用这个插件的，好失望。



这个插件方便所带来的问题就是性能！



每次action render那个show.png.flexi模板时，好花费时间啊。

就如我上面用Product展示这个例子吧，在商品列表页面，我要显示一个小的略略图(我用gif来显示小图，然后在商品详细页面使用JPG显示大图)，

有这样的一列：<td><%= image_tag formatted_product_path(product, :gif) %></td>



如果index页面的@products的size为10（现实情况中可以这个数字大得多），我查看log，一共请求了11次，那10次请求就是用来处理生成图片缩略图（请求show.gif.flexi模板），这样下来真的是不划算啊，我每次打开index页面，明显看到ff的进度条在不断向前推进，那就是在处理图片啊。



所以还是放弃这个插件，哎，无奈！



file_column和attach_fu，不知道哪一个会好一点。





  

    qichunren
    2008-08-29  
    回复
    
  

  
liuqiang 写道
在图片显示的时候做了处理，估计是生成了js对图片做了处理。

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







怎么可能是这样？JS有对图片操作的API吗？是Fleximage调用了Rmagick的API对图片进行了处理，这一切都是在内存中进行的，也就是说处理后的图片是生成好的放在内存中，你可以将图片保存到本地看看，是不是这样的。



它是在图片显示的时候在内存中进行处理的，不过这样也带来一个问题，第次显示图片都要用RMagick进行图片处理，加大了服务器的压力。有时这样处理是不是更好：我既要显示一个缩略图，又要原图，用以前的方法是直接在服务器上生成了一个缩略图，图片第次显示的时候直接显示缩略图原样，服务器不用即时处理，这样是不是好一些？



另外，这插件的确不错，对于对一个Model(如商品)加上一个图片功能的确方便， 不用修改Product的属性（表字段），只需要加上acts_as_fleximage :image_directory => 'public/upload'这些代码就立刻让商品有了"商品预览功能"，不过我现在有一个问题，如果一个商品要有多个图片，则不能这样简单的手段来处理了吧，难道又要像以前那样建立一个关联的model，不知道还有什么方便的方法没有?(这插件都已经这么好用了，我还是贪心啊)





  

    liuqiang
    2008-08-29  
    回复
    
  

  
在show.rhtml文件中写 
<%= image_tag formatted_picture_path(@picture, :png) %>，这个你做的没错。 

另外，在show同一目录下，新建一个文件：show.png.flexi， 
输入： 
@picture.operate do |image| end 


 





  

    qichunren
    2008-08-29  
    回复
    
  

  
我做这个，图片不能显示。

我是这样做的：

使用generate scaffold web name:string

然后给Web这个Model加上你帖子中所说的那些。

然后改了一下new页面的标签，使表单可以上传图片了。

现在在show页面，我按你介绍的使用<%= image_tag formatted_web_path(@web, :png) %>

，结果图片不能显示，我查询html代码，输入的是<img alt="3" src="/webs/3.png" />

请指点一下:)



另外你的帖子中：

引用


显示的图片是用fleximage自己的模板渲染的，该模板的命名是采用需要渲染图片的action的名字加上需要图片显示的格式再加flexi，比如show.jpg.flexi，这是约定好的，fleximage会自动拿它渲染需要在rails模板中显示的图片。模板分别如下：



 



rails模板：



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



 



 fleximage模板：



@picture.operate do |image| end 

是什么意思，我一时没有看明白，反正我没有用其它的模块，我直接使用scaffold生成的show那个页面。





  

    amonlei
    2008-08-23  
    回复
    
  

  
如果做rails集群，那不是很麻烦？多个rails服务器如何共享？搞共享目录？？？？





  

    liuqiang
    2008-08-22  
    回复
    
  

  
Pictrure模型对应的是数据库表不是字段





  

    godfox
    2008-08-22  
    回复
    
  

  
liuqiang 写道




godfox 写道


问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？


 


 发帖不看回复。


 


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




谢谢回复啊，我的意思是这样的，Pictrure 这个模型 对应 的数据表的字段是什么？有了对应的字段，才能把对应的图片信息保存吧，但我看到文档里定义的模型，


都没有任何相关的定义


   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   


 不好意思，刚刚学习rails，麻烦解答一下





  

    liuqiang
    2008-08-22  
    回复
    
  

  
godfox 写道


问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？


 


 发帖不看回复。


 


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





  

    godfox
    2008-08-22  
    回复
    
  

  
问一下，这个插件么有数据表的定义呢？难道不用数据库的支持？





  

    qianjigui
    2008-08-17  
    回复
    
  

  
先下载了,有机会会好好研究的.谢谢!





  

    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

???





  

    liuqiang
    2008-08-04  
    回复
    
  

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

 



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





  

    freeport
    2008-08-03  
    回复
    
  

  
url 怎么设置呢???





  

    liuqiang
    2008-07-29  
    回复
    
  

  
shaka 写道
图片保存的是二进制还是文本？


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





  

    shaka
    2008-07-29  
    回复
    
  

  
图片保存的是二进制还是文本？





  

    liuqiang
    2008-07-28  
    回复
    
  

  
 


leon0122 写道


我按照上面的步骤做的时候，生成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 也不行，不知道是不是版本的问题


 


 我用的是rails 2.0.2/nb6.1，RMagick是2.0，不过我当时没遇到什么问题， 


你是第二步出错的吗？先重启服务器 or 重启电脑试试？


 





  

    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 也不行，不知道是不是版本的问题





  

    right now
    2008-07-18  
    回复
    
  

  
可以考虑把图片上传全部改用fleximage做了





  

    liuqiang
    2008-07-17  
    回复
    
  

  
在图片显示的时候做了处理，估计是生成了js对图片做了处理。

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




    
    
  

  
  

    
发表评论
  
      
提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

      
        


  








        
您还没有登录，请登录后发表评论 

      
              
       
      






        

        
        

          

          

            
            
liuqiang

          

          

            
            
搜索本博客

            
              
              
            
          

          
          
            

              
我的相册

              

                
019a9cee-eeda-3878-b2be-d193caa0130f-thumb

                A569194995207YAN
 共 16 张
              

            

          
          
          
          
          
            
          
          
                      

              
存档

              
            

                    

            
最新评论