让rails处理图片再简单一点

liuqiang

浏览: 159419 次
性别:
来自: 华东

最近访客更多访客>>

czbkjava

renzhe1981

lansim

yuan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ruby

Rails Ruby F#Netbeans rubygems

先来看看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
浏览 3021
评论(35)
论坛回复 / 浏览 (34 / 22857)
查看更多

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 写道

它是在图片显示的时候在内存中进行处理的，不过这样也带来一个问题，第次显示图片都要用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")

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,当按照我已经创建好的字段来作上传：

 <%= f.label :src %> 
 <%= f.file_field :src %>

系统会提示错误：Image file is required
然后我改成：

 <%= f.label :src %> 
 <%= f.file_field :image_file %>

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

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

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

27 楼 amonlei 2009-02-28

怎么加水印？

26 楼 kenrome 2009-01-11

25 楼 sunchaohui_koko 2008-12-24

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

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 写道

cache了没有？？？

21 楼 qichunren 2008-08-29

qichunren 写道

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

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

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模板：

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

fleximage模板：

@picture.operate do |image| end

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

17 楼 amonlei 2008-08-23

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

16 楼 liuqiang 2008-08-22

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论