`
liuqiang
  • 浏览: 164360 次
  • 性别: Icon_minigender_1
  • 来自: 华东
社区版块
存档分类
最新评论

让rails处理图片再简单一点

    博客分类：
  • Ruby
RailsRubyF#Netbeansrubygems 
阅读更多

      先来看看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
 


效果如下：




 


  
  

    
      
        
      
    
    
  




  

    
    
分享到：
      
      
    

  


  

    

      
      |
      分享一款word风格的rails在线编辑器
    

  

  

        
  

    
  

    
评论

    
    

  

    35 楼
    kombest
    2009-03-29  
    
    
  

  
能加水印 和 放缩大小， 如下



@picture.operate do |image|
  image.resize '140x180', :crop => true
  image.image_overlay 'public/images/logo.png',
    :alignment => :bottom_right,
    :offset => '20x20'
end




不错的Plugin，

可跟 attachment_fu 比有什么区别和优势呢






  

    34 楼
    tanggq
    2009-03-23  
    
    
  

  
能加水印
缩放吗？
我win下用rmagick出现这个错误
 undefined method `cur_image' 

大侠们知道是什么问题吗?






  

    33 楼
    kamama
    2009-03-18  
    
    
  

  
问题暂时解决了，下载地址http://www.microsoft.com/downloads/thankyou.aspx?familyId=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displayLang=zh-cn
见这个讨论的贴
http://www.imagemagick.org/discourse-server/viewtopic.php?f=3&t=12972






  

    32 楼
    kamama
    2009-03-18  
    
    
  

  
hexawing 写道
按照网上说的，先gem install xxx，再安装imagemagickxxxx.exe，然后再设环境变量里的path，最后测试这段代码： 

Ruby代码 

require 'RMagick'   
include Magick   
pic = ImageList.new("vd2.jpg")   
l = pic.columns > pic.rows ? pic.columns : pic.rows   
f = 128.0/l;   
thumb = pic.thumbnail(f)   
thumb.write("vd2_tb.jpg") 


  

结果…………不行…… 

后来发现要先“require 'rubygems' ”一下才行，当然这不是主要问题，主要问题是：我光require啊include啊都没问题，一旦把pic = ImageList.new("vd2.jpg")这一行加上，就会报错，Ruby.exe的runtime error什么什么的，而且连报四五个=_= 



有人遇到过这种情况么？麻烦讲解一下是哪里不对吧……Ruby的版本问题？我的Ruby是1.8.6，下载的那个包叫“RMagick-2.9.0-ImageMagick-6.4.8-6-Q8.zip” 



我也遇到这个问题.是不是版本的问题?

一运行调用到fleximage的东西，就跳出错误提示窗口.

runtime error

program \bin\ruby

r6034

调用c库的时候不正确?






  

    31 楼
    amonlei
    2009-03-09  
    
    
  

  
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，不然，机器就会被拖死，详细看官网把







  

    30 楼
    hexawing
    2009-03-04  
    
    
  

  
按照网上说的，先gem install xxx，再安装imagemagickxxxx.exe，然后再设环境变量里的path，最后测试这段代码： 

Ruby代码 

require 'RMagick'   
include Magick   
pic = ImageList.new("vd2.jpg")   
l = pic.columns > pic.rows ? pic.columns : pic.rows   
f = 128.0/l;   
thumb = pic.thumbnail(f)   
thumb.write("vd2_tb.jpg") 


  

结果…………不行…… 

后来发现要先“require 'rubygems' ”一下才行，当然这不是主要问题，主要问题是：我光require啊include啊都没问题，一旦把pic = ImageList.new("vd2.jpg")这一行加上，就会报错，Ruby.exe的runtime error什么什么的，而且连报四五个=_= 



有人遇到过这种情况么？麻烦讲解一下是哪里不对吧……Ruby的版本问题？我的Ruby是1.8.6，下载的那个包叫“RMagick-2.9.0-ImageMagick-6.4.8-6-Q8.zip” 







  

    29 楼
    amonlei
    2009-03-01  
    
    
  

  
shanghaichris 写道
好像不能搭配使用remote_form_for，否则就不能上传图片，还是我哪里做错了？


考虑到安全方面的问题，xmlrequest不支持文件传输，可以考虑form + iframe的方式，可以实现类似效果







  

    28 楼
    liuqiang
    2009-03-01  
    
    
  

  
kenrome 写道
还是没有回答一个问题，就是在使用fleximage插件的时候，与所建的这个Pictures表的字段是怎样关联的？



如果是file_column，则可以通过 file_column :image_src  方式来制定将图片名保存到image_src个字段，

如果是attachment_fu,则会创建符合插件自身需求的好几个字段来保存图片信息。



我测试了一下fleximage,当按照我已经创建好的字段来作上传：

 <p>

    <%= f.label :src %><br />

    <%= f.file_field :src  %>

  </p>

系统会提示错误：Image file is required

然后我改成：

 <p>

    <%= f.label :src %><br />

    <%= f.file_field :image_file  %>

  </p>

发现图片上传成功，不过，根本就没跟pictures表的任何一个字段挂钩！我错在哪里？




约定大于配置，根据model对象的id就可以找到图片!



偶现在上传图片是自己封装mini_magick，也是用model对象的id作为图片名






  

    27 楼
    amonlei
    2009-02-28  
    
    
  

  
怎么加水印？






  

    26 楼
    kenrome
    2009-01-11  
    
    
  

  
还是没有回答一个问题，就是在使用fleximage插件的时候，与所建的这个Pictures表的字段是怎样关联的？



如果是file_column，则可以通过 file_column :image_src  方式来制定将图片名保存到image_src个字段，

如果是attachment_fu,则会创建符合插件自身需求的好几个字段来保存图片信息。



我测试了一下fleximage,当按照我已经创建好的字段来作上传：

 <p>

    <%= f.label :src %><br />

    <%= f.file_field :src  %>

  </p>

系统会提示错误：Image file is required

然后我改成：

 <p>

    <%= f.label :src %><br />

    <%= f.file_field :image_file  %>

  </p>

发现图片上传成功，不过，根本就没跟pictures表的任何一个字段挂钩！我错在哪里？






  

    25 楼
    sunchaohui_koko
    2008-12-24  
    
    
  

  
leon0122 写道


我按照上面的步骤做的时候，生成model&nbsp; picture就会报错： ERROR :: FlexImage requires the RMagick gem.&nbsp; http://rmagick.rubyforge.org/install-faq.html ERROR :: FlexImage requires the RMagick gem.&nbsp; http://rmagick.rubyforge.org/install-faq.html 我用的是netbeans6.0 不知道楼主用的rails是什么版本的？？ 我也下载了rmagick-2.5.2.gem 也不行，不知道是不是版本的问题



win32-xxx.exe也需要安装的，不过也要注意重启netbeans if netbeans!






  

    24 楼
    花花公子
    2008-10-08  
    
    
  

  
要提高性能就自己使用 image_science（这个gem只能用来缩放图像），attachment_fu已经把支持包含进去了。安装也很简单，先安装FreeImage这个图片操作库，再 gem install image_science就好了。






  

    23 楼
    shanghaichris
    2008-10-08  
    
    
  

  
好像不能搭配使用remote_form_for，否则就不能上传图片，还是我哪里做错了？






  

    22 楼
    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了没有？？？






  

    21 楼
    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，不知道哪一个会好一点。






  

    20 楼
    qichunren
    2008-08-29  
    
    
  

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

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







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



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



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







  

    19 楼
    liuqiang
    2008-08-29  
    
    
  

  
<p>在show.rhtml文件中写 <br/>&lt;%= image_tag formatted_picture_path(@picture, :png) %&gt;，这个你做的没错。 <br/><br/>另外，在show同一目录下，新建一个文件：show.png.flexi， <br/>输入： <br/>@picture.operate do |image| end </p>
<p> </p>






  

    18 楼
    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那个页面。






  

    17 楼
    amonlei
    2008-08-23  
    
    
  

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






  

    16 楼
    liuqiang
    2008-08-22  
    
    
  

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





    
    
  


  

    
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics