Ruby on Rails下的图像处理入门教程

2024-04-02 07:23:03 26

图像可以说是任何应用至关重要的一部分。从社交网络到一个简单的Bug追踪器，图像都扮演着重要的角色。然而管理图像并不是一件容易的事情，需要提前耗费大量的时间精力去计划。

本文演示了如何在Rail中实现这一目标。如何处理你的图像以及在后台创建多个版本？如何通过压缩图像又不损图像质量，以此来提高页面性能？这些且听本文一一道来。
入门

本文教程是运行于Rails4.2，通过MongoDb数据库和HAML呈现视图。不过本文所展示的片段应该兼容任何Rails版本（尽管有些配置差异）。

布置舞台

ImageMagick是一套功能强大、稳定而且开源的工具集和开发包，你可以通过包管理把它安装在你的电脑上。

Ubuntu上:

sudoapt-get-yinstallimagemagick
sudoapt-get-yinstalllibmagic-dev
sudoapt-get-yinstalllibmagickwand-dev

MacOSX上，建议使用自制程序：

brewinstallimagemagick

现在我们需要一个连接到本地ImageMagick库的Ruby适配器。你可以使用MiniMagick，因为它是轻量级的：

#Gemfile

gem'mini_magick'

MiniMagick的特性

在正式开始之前，让我们先了解一下某些MiniMagick的特性，以避免不必要的错误。

打开Rails控制台(Railsc)并运行以下代码:

#Openanimagefromawebsite

image=MiniMagick::Image.open("https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/85.jpg")

#GettheImage'swidth
image.width#4928

#Gettheimage'sheight
image.height#3264

让我们调整一下以适应我们的iPad：

image.resize"2048x1536"

#Nowgettheimage'snewwidthandheight

p"Widthis=>#{image.width}andheightis=>#{image.height}"

更改后的文件存储在哪呢？

image.path#temppath

操纵图像存储到一个临时的路径有消失的危险。所以要把它放到磁盘中，一个简单的调用编写方法如下：

image.write"public/uploads/test.jpg"

转换图像

或许你最常见的工作之一就是将图像转换成不同的格式。MiniMagick可以简化这一过程：

image.format"png"
image.write"public/uploads/test.png"

你还可以将多个操作放在同一模块中：

image.combine_optionsdo|i|
i.resize"2048x1536"
i.flip
i.rotate"-45"
i.blur"0x15"
end
image.write"public/uploads/blur.png"

![Someweirdresult](blur.png)

至此，让我们来看看如何将以上的这些与我们的Rails应用联系到一起。
上传文件

Carrierwave简化了在Ruby中上传文件，同时它与MiniMagick交互的也很好。

#Gemfile

gem'carrierwave'
gem'carrierwave-mongoid',:require=>'carrierwave/mongoid'

注意：如果你是在ActiveRecord或DataMapper上，配置会稍微不同。Carrierwave官方文档介绍了正确的方法，点此进入。

获取：

bundleinstall

创建第一个上传：

#app/uploaders/image_uploader.rb

classImageUploader<CarrierWave::Uploader::Base
#IncludeRMagickorMiniMagicksupport:
includeCarrierWave::MiniMagick

#ChoosewhatkindofstoragetouseforthisUploader:
storage:file
#Overridethedirectorywhereuploadedfileswillbestored.
#Thisisasensibledefaultforuploadersthataremeanttobemounted:
defstore_dir
"uploads/images"
end
end

这段代码是自说明，storage:file指示服务器将图像存储在本地服务器上，store_dir指定位置。

自从文件通过互联网传送，总会过滤传入的文件：

#app/uploaders/image_uploader.rb
...
#Addawhitelistofextensionswhichareallowedtobeuploaded.
#Forimagesyoumightusesomethinglikethis:
defextension_white_list
%w(jpgjpegpnggif)
end
...

将这种上传置入我们的图像模型：

#app/models/image.rb

classImage
includeMongoid::Document
includeMongoid::Timestamps
includeMongoid::Paranoia
includeMongoid::Attributes::Dynamic
includeRails.application.routes.url_helpers

mount_uploader:media,ImageUploader,mount_on::media_filename
end

编辑image_uploader.rb来处理上传的图像：

#app/uploaders/image_uploader.rb

#.....
process:resize_to_fill=>[200,200]
process:convert=>'png'
#.....

尝试从Rails控制台创建一个新的图像：

media=File.open("/Users/test/Desktop/image/jpg")
img=Image.new(:media=>media)
img.save

上传图像在store_dir下是可用的。然而上传的图像是立即被处理的，并被200×200的图像覆盖。我们没有原始文件的副本留作以后编辑。所以为避免这种情况，我们需要创建多个版本的文件。

#app/uploaders/image_uploader.rb

#.....
version:thumbdo
process:resize_to_fit=>[100,100]
process:convert=>'jpg'
end

version:coverdo
process:resize_to_fit=>[240,180]
process:convert=>'jpg'
end

#.....

下面显示的是上段代码创建两个版本，检查版本由Carrierwave创建：

img.media.versions[:thumb]#returnsthethumbimageinstance
img.media.versions[:cover]#returnsthecoverimageinstance

你注意到这些图像是瞬间生成的吗？这意味着图像转换发生在同一线程中，并且执行是被阻塞的，直到完成为止。在生产应用中，在同一线程里创建一个图像的多个版本是不受欢迎的。相反，我们应该有条件的处理这种情况。

#app/uploaders/image_uploader/rb

#....
version:cover,:if=>:is_live?do
process:resize_to_fit=>[240,180]
process:convert=>'jpg'
end

defis_live?(img=nil)
@is_live
end

defis_live=(value)
@is_live=value
end
#....

这样，当我们创建一个新的图像时，副本将不会生成。我们可以在需要的时候手动去触发，运行如下代码：

img.media.is_live=true
img.save
img.media.recreate_versions!:cover

这代码也是运行于前台，是一个阻塞操作，但至少可以尽可能的推迟到最后一刻。我们可以通过Resque在后台进一步的运行：

#lib/resque/image_queue.rb
classImageQueue
@queue=:image_queue
defself.perform(image_id)
image=Image.findimage_id
img.media.is_live=true
img.save
img.media.recreate_versions!:cover
end
end

然后，列队：

Resque.enqueue(ImageQueue,img.id.to_s)

性能提升

图像是厚重的，往往会减慢网站。减少页面负担的一种方法是压缩这些图像。Carrierwave图像优化器可以帮助我们飞速的压缩图像。

将下面这段添加到Gemfile：

gem'carrierwave-imageoptimizer'

然后编辑image_uploader：

#app/uploaders/image_uploader.rd

#.....

includeCarrierWave::ImageOptimizer
process:optimize
process:quality=>100
#....

如此压缩不会有视觉丧失。

图像处理是一个巨大的垂直,我们几乎只触及表面。我们可以建立很多很酷的东西。如果您对这篇文章感兴趣，请在评论中分享您的想法。

Ruby on Rails下的图像处理入门教程

热门推荐

随机推荐