Ruby on Rails下的图像处理入门教程
图像可以说是任何应用至关重要的一部分。从社交网络到一个简单的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 #....
如此压缩不会有视觉丧失。
图像处理是一个巨大的垂直,我们几乎只触及表面。我们可以建立很多很酷的东西。如果您对这篇文章感兴趣,请在评论中分享您的想法。