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

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

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

(0)

相关推荐

  • CentOS7下搭建ruby on rails开发环境

    1.安装rvm curl -L https://get.rvm.io | bash -s stable rvm是一个命令行工具,提供多版本ruby环境的管理和切换,还可以根据项目管理不同的gemset. 如果没有生成ssh key,这一步可能会失败,直接ssh-keygen生成key之后再执行安装即可. 还可能遇到gpg有关的问题:根据提示执行: gpg2 --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113

  • 快速安装Ruby on Rails的简明指南

    对于新入门的开发者,如何安装 Ruby, Ruby Gems 和 Rails 的运行环境可能会是个问题,本页主要介绍如何用一条靠谱的路子快速安装 Ruby 开发环境. 次安装方法同样适用于产品环境! 系统需求 首先确定操作系统环境,不建议在 Windows 上面搞,所以你需要用: Mac OS X 任意 Linux 发行版本(Ubuntu,CentOS, Redhat, ArchLinux ...) 强烈新手使用 Ubuntu 省掉不必要的麻烦! 以下代码区域,带有 $ 打头的表示需要在控制台(

  • win7安装ruby on rails开发环境

    前言 看到很多文章都说ruby环境在windows上是非常难搭建,会出现各种各样的怪问题,所以都推荐到linux和mac上安装开发.但是我按照教程搭了下,问题也不算太多.总过大概花费了2个半小时左右就完成了.所以大家不要被吓尿了,下面就把安装的步骤及具体的版本记录了一下供大家参考. 安装步骤: 开发机环境:我使用的开发机:win7 旗舰版 - 64位 (cpu是i5). 1 安装 rubyinstaller-2.0.0-p481.exe     1 选择安装目录:(如:D:\server\Rub

  • Ruby On Rails上手笔记(安装使用全过程)

    有机会再试一试Rails了,只是原来接触的是2,现在已然变成了4,似乎现在的安装比原来会快些.. Rails 4 安装 针对于安装了RVM 复制代码 代码如下: gem install rails 没有的话应该这样: 复制代码 代码如下: sudo gem install rails 安装RVM可以用句 复制代码 代码如下: curl -L https://get.rvm.io | bash -s stable 查看rails版本 复制代码 代码如下: rails -vRails 4.0.3 似

  • 在 Ubuntu 12.04 Server 上安装部署 Ruby on Rails 应用

    本教程只适合 Ubuntu Server 用于部署项目到线上,建议使用同样的 Ubuntu 版本,以免遇到一些版本不同带来的问题. 本教程适合新手初次部署 Rails 应用: 本文测试通过环境 Ubuntu 12.04 Server, 服务器安装测试于 Linode VPS (Ubuntu 12.04 LTS (GNU/Linux 3.4.2-x86_64-linode25 x86_64). 配置 Ubuntu Server 系统 如果你是国内服务器,推荐修改网易的源 输入 sudo vi /e

  • 几个加速Ruby on Rails的编程技巧

    Ruby 语言常以其灵活性为人所称道.正如 Dick Sites 所言,您可以 "为了编程而编程".Ruby on Rails 扩展了核心 Ruby 语言,但正是 Ruby 本身使得这种扩展成为了可能.Ruby on Rails 使用了该语言的灵活性,这样一来,无需太多样板或额外的代码就可以轻松编写高度结构化的程序:无需额外工作,就可以获得大量标准的行为.虽然这种轻松自由的行为并不总是完美的,但毕竟您可以无需太多工作就可以获得很多好的架构. 例如,Ruby on Rails 基于模型-

  • Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法【测试可用】

    本文实例讲述了Ruby on rails安装后去掉DL is deprecated,please use Fiddle警告信息的方法.分享给大家供大家参考,具体如下: 问题: 搭建完完ruby on rails环境之后发现每次运行命令总会有这样一个Warning:DL is deprecated, please use Fiddle,例如: 对运行什么的没有影响,只是Dl过时了,可是Ruby大大不管这个问题,可是看着就烦呐~~ 解决方法(from stackflow): 找到安装目录D:\Rai

  • Windows下Ruby on Rails开发环境安装配置图文教程

    本文详细介绍如何在Windows配置Ruby on Rails 开发环境,希望对ROR初学者能有帮助. 一.下载并安装Ruby Windows下安装Ruby最好选择 RubyInstaller(一键安装包). 下载地址: http://rubyforge.org/frs/?group_id=167 . 我们这里下载目前较新的rubyinstaller-1.9.3-p0.exe 一键安装包.这个安装包除了包含ruby本身,还有许多有用的扩展(比如gems)和 帮助文档. 双击安装,安装过程出现如下

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

    图像可以说是任何应用至关重要的一部分.从社交网络到一个简单的Bug追踪器,图像都扮演着重要的角色.然而管理图像并不是一件容易的事情,需要提前耗费大量的时间精力去计划. 本文演示了如何在Rail中实现这一目标.如何处理你的图像以及在后台创建多个版本?如何通过压缩图像又不损图像质量,以此来提高页面性能?这些且听本文一一道来. 入门 本文教程是运行于Rails 4.2,通过MongoDb数据库和HAML呈现视图.不过本文所展示的片段应该兼容任何Rails版本(尽管有些配置差异). 布置舞台 Image

  • 在Ruby on Rails中使用AJAX的教程

    如果没有听说过 Rails,那么欢迎您外星旅行归来,近几年大概只有那个地方没有听说过 Ruby on Rails 了.Rails 最吸引人的地方是能够很快地建立功能完备的应用程序并运行起来.Rails 为 Ajax 而内置集成的 Prototype.js 库可以轻松快速地创建所谓的富 Internet 应用程序. 本文将逐步引导您创建 Rails 应用程序.然后深入分析如何利用 Ajax 特性编写从服务器上读写数据的 JavaScript 代码. 从容起步 Ajax 之旅--Ajax 技术资源中

  • Ruby on Rails框架程序连接MongoDB的教程

    前边有介绍mongodb的安装以及ror项目的搭建,现在进行一下整合. 1.创建项目 创建项目时不再使用rails active_record支持 rails new todo -O 2.我们将要使用MongoMapper来驱动MongoDB到Rails 编辑GemFile,增加下面的内容 gem"mongo_mapper" 然后  执行 bundle install 安装gem bundle install 3.添加数据库链接 在config/initializer下面新建一个mon

  • 浅谈Ruby on Rails下的rake与数据库数据迁移操作

    不知道你有没有把数据迁移写入Migration文件的经历,相信无论是老鸟还是新手都这样干过吧.事实上,这样做并不是行不通,只不过这样的实践慢慢会给你引入一些不必要的麻烦. 一般认为db/migrate文件夹里的内容是关于你数据库Schema的演变过程,每个新的开发或线上环境都要通过这些Migration来构建可用的数据库.但如果这里装入了,负责细节的业务代码,比如一些历史遗留数据的迁移代码之类的,当一段时间后,数据库的结构变化了,但Migration没有跟着变化,渐渐的曾经的辅助代码,就成了垃圾

  • windows下nginxHTTP服务器入门教程初级篇

    一.介绍Nginx是俄罗斯人编写的十分轻量级的HTTP服务器,Nginx,它的发音为"engine X", 是一个高性能的HTTP和反向代理服务器,同时也是一个IMAP/POP3/SMTP 代理服务器. 二.Location语法语法:location [=|~|~*|^~] /uri/ { - } 注: 1.~ 为区分大小写匹配 2.~* 为不区分大小写匹配 3.!~和!~*分别为区分大小写不匹配及不区分大小写不匹配 示例一: location / { } 匹配任何查询,因为所有请求都

  • 利用RJB在Ruby on Rails中使用Java代码的教程

    开始之前 关于本教程 Ruby on Rails (Rails) 是用 Ruby 编写的一个 full-stack Web 应用程序框架,而 Ruby 是一种功能丰富的.免费的.可扩展的.可移植的.面向对象的脚本编制语言.Rails 在 Web 应用程序开发人员之间非常流行.通过它,可以快速有效地开发 Web 应用程序,并将其部署到任何 Web 容器中,例如 IBM? WebSphere? 或 Apache Tomcat. 在 Rails 和类似的 Web 应用程序开发框架出现之前,用于 Web

  • Windows系统下Node.js的简单入门教程

    随着近日Paypal和Netflix宣告 迁移到Node.js, 服务器端Javascript平台已经证明其自身在企业领域的价值. 这对于Node来说是一小步,对于Javascript而言却是一大跨越啊! 来自.NET, Java, PHP, Ruby on Rails和更多技术领域的程序员, 所有游走于服务器端的编码者都会聚集到这个平台上. 作为像 Yahoo, Walmart, 和 Oracle 这样的大玩家入局,, Node 正在甩掉其一直就存在的不成熟和不稳定的坏名声. 在这篇文章中,我

  • 使用Ruby on Rails快速开发web应用的教程实例

    Ruby on Rails 正在令整个 Web 开发领域受到震憾.让我们首先了解底层的技术: Ruby 是一门免费的.简单的.直观的.可扩展的.可移植的.解释的脚本语言,用于快速而简单的面向对象编程.类似于 Perl,它支持 处理文本文件和执行系统管理任务的很多特性.     Rails 是用 Ruby 编写的一款完整的.开放源代码的 Web 框架,目的是使用更简单而且更少的代码编写实际使用的应用程序. 作为一个完整的框架,这意味着 Rails 中的所有的层都是为协同工作而构造的,所以您不必自己

  • windows下安装ruby与rails时遇到的问题总结

    前言 最近因为工作的需要,准备安装ruby on rails,在网上搜了下,步骤都类似,但实际安装过程中却碰到很多问题. 说明下:文章是按照我尝试的过程描述的.但最终是靠 运行 railsinstaller一键式安装包才成功的(第五段),因此前面的部分大家可以看看,但不用去尝试. 下面来看看详细的介绍吧: 一.首先要安装ruby 因为在windows下安装ruby,都是推荐下载rubyinstaller安装程序. 先进入ruby官网http://www.ruby-lang.org/en/down

随机推荐