• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ruby on Rails下的图像处理入门教程

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

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

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

    布置舞台

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

    Ubuntu上:

    sudo apt-get -y install imagemagick
    sudo apt-get -y install libmagic-dev
    sudo apt-get -y install libmagickwand-dev
    
    

    Mac OS X上,建议使用自制程序:

    brew install imagemagick
    
    

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

    # Gemfile
     
    gem 'mini_magick'
    
    

    MiniMagick的特性

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

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

    # Open an image from a website
     
    image = MiniMagick::Image.open("https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/85.jpg")
     
    # Get the Image's width
    image.width # 4928
     
    # Get the image's height
    image.height #3264
    
    

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

    image.resize "2048x1536"
     
    # Now get the image's new width and height
     
    p "Width is => #{image.width} and height is => #{image.height}"
    
    

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

    image.path # temp path
    
    

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

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

    转换图像

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

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

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

    image.combine_options do |i|
     i.resize "2048x1536"
     i.flip
     i.rotate "-45"
     i.blur "0x15"
    end
    image.write "public/uploads/blur.png"
     
    ![Some weird result](blur.png)
    
    

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

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

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

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

    获取:

    bundle install
    
    

    创建第一个上传:

    #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"
     end
    end
    
    

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

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

    # 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
    ...
    
    

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

    # 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_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 :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创建:

    img.media.versions[:thumb] # returns the thumb image instance
    img.media.versions[:cover] # returns the cover image instance
    
    

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

    # 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_live
    end
     
    def is_live=(value)
     @is_live = value
    end
    #....
    
    

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

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

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

    # lib/resque/image_queue.rb
    class 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
     end
    end
    
    

    然后,列队:

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

    性能提升

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

    将下面这段添加到Gemfile:

    gem 'carrierwave-imageoptimizer'
    
    

    然后编辑image_uploader:

    # app/uploaders/image_uploader.rd
     
    #.....
     
    include CarrierWave::ImageOptimizer
    process :optimize
    process :quality => 100
    #....
    
    

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

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

    您可能感兴趣的文章:
    • 快速安装Ruby on Rails的简明指南
    • win7安装ruby on rails开发环境
    • 在 Ubuntu 12.04 Server 上安装部署 Ruby on Rails 应用
    • Windows下Ruby on Rails开发环境安装配置图文教程
    • Ruby On Rails上手笔记(安装使用全过程)
    • CentOS7下搭建ruby on rails开发环境
    • 几个加速Ruby on Rails的编程技巧
    • Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法【测试可用】
    上一篇:优化Ruby代码使程序运行速度提高的例子
    下一篇:使用C++来编写Ruby程序扩展的教程
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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