RAILS的图片处理插件fleximage

 

FLEXIMAGE,依赖的包有AWS-S3,RMagick

 

我的环境是windows 7 + ruby1.8.7

 

1.gem install aws-s3

 

2.下载win RMagick

 

RMagick 已经不再rubyforge上维护了，移植到了http://github.com/rmagick/rmagick

 

所有要在这里下载才对，rubyforge上不好下载了。

 

下载完毕，安装的顺序为：

 

1.Unzip files

2.Install ImageMagick

3.Install RMagick locally

4.Restart machine

 

3.下载plugin fleximage

 

我在windows上装git，就是不行，只好下载了。下载好后直接放到vender下面即可。

 

 

 

flexmage现在是rails中上传图片与处理图片的首选，就算是paperclip也比不上它。它对Rmagick做了一层很人性化的封装，让我们处理图片更加便捷。比起paperclip，它原生就支持远程URL上传图片和删除硬盘上的附件。

如果看过我的另一篇博文《利用paperclip实现图片上传》，其流程是一样。因此我们就在那个应用上扩展就是！
ruby script/generate scaffold Picture user:belongs_to is_avatar:boolean

这个和原来的Photo模块没有什么两样，这样我们就可以比较一下，flexmage能把上传简化到什么地步了！
安装flexmage
ruby script/plugin install git://github.com/moser/fleximage_i18n.git

从名字就知道其支持国际化，实在太强大了！
修改视图

新建_form.html.erb
<% form_for @picture, :html => { :multipart => true } do |f| %>
<%= f.error_messages %>
<% if logged_in? %>
<%= f.hidden_field :user_id,:value => current_user.id %>
<% end %>
<% if action_name == "new" %>
<p>
<%= f.label :is_avatar,"是否作为头像" %>
<%= f.check_box :is_avatar %>
</p>
<% end %>
<p>
<%= f.file_field :image_file %><br />
或者通过URL<%= f.text_field :image_file_url %>
</p>
<p>
<%= f.hidden_field :image_file_temp %>
<b>Uploaded Image:</b><br />
<%= embedded_image_tag(@picture.operate { |img| img.resize 100 }) if @picture.has_image? %>
</p>
<p>
<button type="submit"><%= button_name %></button>
</p>
<% end %>

修改new.html.erb
<% title "上传图片" %>
<%= render :partial => 'form',:locals => {:button_name => "上传"} %>
<%= link_to 'Back', pictures_path,:class => "button" %>

修改edit.html.erb
<% title "编辑图片" %>
<%= render :partial => 'form',:locals => {:button_name => "更新"} %>
<%= link_to '大图', @picture,:class => "button" %>
<%= link_to '返回', pictures_path,:class => "button" %>

修改show.html.erb
<div class="figure">
<%= embedded_image_tag(@picture) if @picture.has_image? %>
<div class="legend">所有人：<%=h @picture.user.login rescue nil%>；是否为头像：<%= @picture.is_avatar %></div>
</div>
<%= debug @picture %>
<%= link_to '编辑', [:edit,@picture],:class => "button" %>
<%= link_to '返回', pictures_path,:class => "button" %>

修改index.html.erb
<h1>图片列表</h1>
<table>
<tr>
<th>所有人</th>
<th>是否作为头像</th>
<th>预览</th>
</tr>

<% @pictures.each do |picture| %>
<tr>
<td><%=h picture.user.login rescue nil %></td>
<td><%= picture.is_avatar ? "是" : "否" %></td>
<td><%= embedded_image_tag(picture.operate { |img| img.resize 100 }) if picture.has_image? %></td>
<td><%= link_to 'Show', picture %></td>
<td><%= link_to 'Edit', edit_picture_path(picture) %></td>
<td><%= link_to 'Destroy', picture, :confirm => 'Are you sure?', :method => :delete %></td>
</tr>
<% end %>
</table>
<br />

<%= link_to '上传图片', new_picture_path %>

最后我们修改一下Picture模型，完全不用触动控制器就完成上传功能了。
class Picture < ActiveRecord::Base
belongs_to :user
validates_presence_of :user_id
#image_directory是必填参数，没有默认值
acts_as_fleximage :image_directory => 'public/images/uploaded_photos'
end

当我们在模型声明了acts_as_fleximage后，插件就为我们的Picture实例添加了image_file ,image_file_url与image_file_temp三个虚拟属性。image_file是用于本地上传，image_file_url是用 于远程URL上传，image_file_temp是用来保存一个副本，而这个副本有什么用？我们在提交表单的时候，有时会由于网络等问题导致提交失败， 让我们被逼重新填写所有字段，文件也当然要重新上传。image_file_temp就是为应对这情形而开发的，当我们上传文件，rails会把文件上传 一个目录，但这时它不会立即把它们传送到目标目录中，就像电驴一样，会放到一个临时目录中，待到完成后才把它复制到目标目录。因此当我们提交失败 后，rails就用不着重新上传，而是从临时目录中拿就是，速度就快多！这是个很贴心的功能。

再看看embedded_image_tag方法，它比image_tag强大了，它能显示尚未保存的模型的图片，而且能对图片进行实时编辑。但要注意 了，它会在页面中生成大量base64编码，不但几何级地增大页面的体积，而且这编码是交由javascript解释器来渲染生成图片，这效率当然是慢一 个字，特别是在IE中。因此图片的渲染还是交给ruby解析器吧，这样我们就得动一动控制器了。修改pictures_controller的show action:
def show
@picture = Picture.find(params[:id])
respond_to do |format|
format.html # show.html.erb
format.png { render :inline => "@picture.operate{}", :type => :flexi}
format.gif { render :inline => "@picture.operate{}", :type => :flexi}
format.jpg { render :inline => "@picture.operate{}", :type => :flexi}
format.xml { render :xml => @picture }
end
end

修改对应视图
<div class="figure">
<%= image_tag picture_path(@picture, :format => :jpg) %>
<div class="legend">所有人：<%=h @picture.user.login rescue nil%>；是否为头像：<%= @picture.is_avatar %></div>
</div>
<%= debug @picture %>
<%= link_to '编辑', [:edit,@picture],:class => "button" %>
<%= link_to '返回', pictures_path,:class => "button" %>
添加页面缓存

没什么好说，就是为了减少重复渲染页面，缩短响炒时间。由于直接给客户端发送静态页面，因此也免去读取数据库这一步了。
class PicturesController < ApplicationController
caches_page :show

# ...

def update
# ... standard update code
expire_picture(@picture)
end

def destroy
# ... standard destroy code
expire_picture(@picture)
end

private
def expire_picture(picture)
expire_page formatted_picture_path(picture, :jpg)
end
end
添加新字段，储存原图片的属性

flexmage有个不好的地方，它并不是百分之一百复制原图片。它默认储存的图片格式为png，如果非png它会转换成png，并降低其画质，默认是其85%。我们得修改这些默认属性避免这问题。
acts_as_fleximage do
image_directory 'public/images/uploaded_photos'
image_storage_format :jpg
output_image_jpg_quality 100
end

我们也可以设置默认储存图片格式为gif，但是也改变了动态gif变成静态gif的命运……

不过有些东西我们还是能做到，如原图片的各字（连带其扩展名），长度与宽度。这些属性都是定死的，一定要那样命名 （image_filename，image_width与image_height），flexmage才会在上传过来把这些信息抽取出来储存到数据库 中。那么让我们为模型添加与这些属性同名的字段吧。
class AddColumnsToPictures < ActiveRecord::Migration
def self.up
add_column :pictures, :image_filename, :string
add_column :pictures, :image_width, :integer
add_column :pictures, :image_height, :integer
end

def self.down
remove_column :pictures, :image_height
remove_column :pictures, :image_width
remove_column :pictures, :image_filename
end
end

那样我们就可以在视图中显示它们了，如：
原名为：<%= @picture.image_filename %>
宽为：<%= @picture.image_width %>px
长为：<%= @picture.image_height %>px
设置默认图片

为了防止图片失效，如目录更改了，我们可以像paperclip那样设置一个默认图片，如：
acts_as_fleximage do
image_directory 'public/images/uploaded_photos'
image_storage_format :jpg
output_image_jpg_quality 100
default_image_path 'public/images/rails.png'
end

添加其他参数
acts_as_fleximage do
image_directory 'public/images/uploaded_photos'
image_storage_format :jpg
output_image_jpg_quality 100
default_image_path 'public/images/rails.png'
use_creation_date_based_directories true
require_image true
missing_image_message 'is required'
invalid_image_message 'was not a readable image'
end

缩略图

fleximage的图片都是即时生成，不像paperclip导样在上传后我们设置了几种样式就生成几套图塞在硬盘中，这样对各自来说都有道理—— fleximage说是节省空间，paperclip说是节省时间。在用户体验来说，fleximage是吃亏点，因此它才搞了个页面缓存。另一方面，原 图肯定会经过处理，而且一定要经过特殊的渠道渲染出来，以前是要求show视图所在的目录建立一个flexi文件，如 show.jpg.flexi，show.gif.flexi，不过我都是用"inline"方式实现而已，就像RJS那样，也有inline RJS的替代方案。为此，我们可以模拟了paperclop的@picture.image.url(:thumb)效果。

新建两个action与修改缓存。
class PicturesController < ApplicationController
caches_page :show,:thumb,:avatar
before_filter :find_picture, :only => [:show,:edit,:update,:destroy,:thumb,:avatar]

#==================其他actions==================

def thumb
render :inline => "@picture.operate {|p| p.resize '100x100'}", :type => :flexi
end

def avatar
render :inline => "@picture.operate {|p| p.resize '200x200'}", :type => :flexi
end

protected
def find_picture
@picture= Picture.find(params[:id])
end

def expire_picture(picture)
expire_page picture_path(picture, :format => :jpg)
expire_page thumb_picture_path(picture, :format => :jpg)
expire_page avatar_picture_path(picture, :format => :jpg)
end
end

修改路由规则：
map.resources :photos, :member => { :thumb => :get,:avatar => :get}

那么我们就可以在页面中使用缩略图了。
<%= image_tag thumb_picture_path(@picture, :format => :jpg) %>
<&#相当于 image_tag @picture.image.url(:thumb) %>
<%= image_tag avatar_picture_path(@picture, :format => :jpg) %>
<&#相当于 image_tag @picture.image.url(:avatar) %>
一些有用的链接
http://www.railslodge.com/plugins/93-flex-image
http://www.railslodge.com/plugins/93-flex-image/documentations/2-editing-images