图像可以说是任何应用至关重要的一部分。从社交网络到一个简单的Bug追踪器，图像都扮演着重要的角色。然而管理图像并不是一件容易的事情，需要提前耗费大量的时间精力去计划。
本文演示了如何在Rail中实现这一目标。如何处理你的图像以及在后台创建多个版本？如何通过压缩图像又不损图像质量，以此来提高页面性能？这些且听本文一一道来。
入门
本文教程是运行于Rails 4.2，通过MongoDb数据库和HAML呈现视图。不过本文所展示的片段应该兼容任何Rails版本（尽管有些配置差异）。
布置舞台
ImageMagick是一套功能强大、稳定而且开源的工具集和开发包，你可以通过包管理把它安装在你的电脑上。
Ubuntu上:
|
1
2
3
|
sudo apt-get -y install imagemagicksudo apt-get -y install libmagic-devsudo apt-get -y install libmagickwand-dev |
Mac OS X上，建议使用自制程序：
|
1
|
brew install imagemagick |
现在我们需要一个连接到本地ImageMagick库的Ruby适配器。你可以使用MiniMagick，因为它是轻量级的：
|
1
2
3
|
# Gemfile gem 'mini_magick' |
MiniMagick的特性
在正式开始之前，让我们先了解一下某些MiniMagick的特性，以避免不必要的错误。
打开Rails控制台(Rails c)并运行以下代码:
|
1
2
3
4
5
6
7
8
9
|
# Open an image from a website image = MiniMagick::Image.open("https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/85.jpg") # Get the Image's widthimage.width # 4928 # Get the image's heightimage.height #3264 |
让我们调整一下以适应我们的iPad：
|
1
2
3
4
5
|
image.resize "2048x1536" # Now get the image's new width and height p "Width is => #{image.width} and height is => #{image.height}" |
更改后的文件存储在哪呢？
|
1
|
image.path # temp path |
操纵图像存储到一个临时的路径有消失的危险。所以要把它放到磁盘中，一个简单的调用编写方法如下：
|
1
|
image.write "public/uploads/test.jpg" |
转换图像
或许你最常见的工作之一就是将图像转换成不同的格式。MiniMagick可以简化这一过程：
|
1
2
|
image.format "png"image.write "public/uploads/test.png" |
你还可以将多个操作放在同一模块中：
|
1
2
3
4
5
6
7
8
9
|
image.combine_options do |i| i.resize "2048x1536" i.flip i.rotate "-45" i.blur "0x15"endimage.write "public/uploads/blur.png"  |
至此，让我们来看看如何将以上的这些与我们的Rails应用联系到一起。
上传文件
Carrierwave简化了在Ruby中上传文件，同时它与MiniMagick交互的也很好。
|
1
2
3
4
|
# Gemfile gem 'carrierwave'gem 'carrierwave-mongoid', :require => 'carrierwave/mongoid' |
注意：如果你是在ActiveRecord或DataMapper上，配置会稍微不同。Carrierwave官方文档介绍了正确的方法，点此进入。
获取：
|
1
|
bundle install |
创建第一个上传：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#app/uploaders/image_uploader.rb class ImageUploader < CarrierWave::Uploader::Base # Include RMagick or MiniMagick support: include CarrierWave::MiniMagick # Choose what kind of storage to use for this Uploader: storage :file # Override the directory where uploaded files will be stored. # This is a sensible default for uploaders that are meant to be mounted: def store_dir "uploads/images" endend |
这段代码是自说明，storage :file指示服务器将图像存储在本地服务器上，store_dir指定位置。
自从文件通过互联网传送，总会过滤传入的文件：
|
1
2
3
4
5
6
7
8
|
# app/uploaders/image_uploader.rb...# Add a white list of extensions which are allowed to be uploaded.# For images you might use something like this:def extension_white_list %w(jpg jpeg png gif)end... |
将这种上传置入我们的图像模型：
|
1
2
3
4
5
6
7
8
9
10
11
|
# app/models/image.rb class Image include Mongoid::Document include Mongoid::Timestamps include Mongoid::Paranoia include Mongoid::Attributes::Dynamic include Rails.application.routes.url_helpers mount_uploader :media, ImageUploader, mount_on: :media_filenameend |
编辑image_uploader.rb来处理上传的图像：
|
1
2
3
4
5
6
|
# app/uploaders/image_uploader.rb #.....process :resize_to_fill => [200, 200]process :convert => 'png'#..... |
尝试从Rails控制台创建一个新的图像：
|
1
2
3
|
media = File.open("/Users/test/Desktop/image/jpg")img = Image.new(:media => media)img.save |
上传图像在store_dir下是可用的。然而上传的图像是立即被处理的，并被200×200的图像覆盖。我们没有原始文件的副本留作以后编辑。所以为避免这种情况，我们需要创建多个版本的文件。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
# app/uploaders/image_uploader.rb #.....version :thumb do process :resize_to_fit => [100, 100] process :convert => 'jpg'end version :cover do process :resize_to_fit => [240, 180] process :convert => 'jpg'end #..... |
下面显示的是上段代码创建两个版本，检查版本由Carrierwave创建：
|
1
2
|
img.media.versions[:thumb] # returns the thumb image instanceimg.media.versions[:cover] # returns the cover image instance |
你注意到这些图像是瞬间生成的吗？这意味着图像转换发生在同一线程中，并且执行是被阻塞的，直到完成为止。在生产应用中，在同一线程里创建一个图像的多个版本是不受欢迎的。相反，我们应该有条件的处理这种情况。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
# app/uploaders/image_uploader/rb #....version :cover, :if => :is_live? do process :resize_to_fit => [240, 180] process :convert => 'jpg'end def is_live?(img = nil) @is_liveend def is_live=(value) @is_live = valueend#.... |
这样，当我们创建一个新的图像时，副本将不会生成。我们可以在需要的时候手动去触发，运行如下代码：
|
1
2
3
|
img.media.is_live = trueimg.saveimg.media.recreate_versions! :cover |
这代码也是运行于前台，是一个阻塞操作，但至少可以尽可能的推迟到最后一刻。我们可以通过Resque在后台进一步的运行：
|
1
2
3
4
5
6
7
8
9
10
|
# lib/resque/image_queue.rbclass ImageQueue @queue = :image_queue def self.perform(image_id) image = Image.find image_id img.media.is_live= true img.save img.media.recreate_versions! :cover endend |
然后，列队：
|
1
|
Resque.enqueue(ImageQueue, img.id.to_s) |
性能提升
图像是厚重的，往往会减慢网站。减少页面负担的一种方法是压缩这些图像。Carrierwave图像优化器可以帮助我们飞速的压缩图像。
将下面这段添加到Gemfile：
|
1
|
gem 'carrierwave-imageoptimizer' |
然后编辑image_uploader：
|
1
2
3
4
5
6
7
8
|
# app/uploaders/image_uploader.rd #..... include CarrierWave::ImageOptimizerprocess :optimizeprocess :quality => 100#.... |
如此压缩不会有视觉丧失。
图像处理是一个巨大的垂直,我们几乎只触及表面。我们可以建立很多很酷的东西。如果您对这篇文章感兴趣，请在评论中分享您的想法。
