Rails验证码图片的实现

Rails验证码图片的实现

第一步：安装必须的软件

在linux下生成图片需要图片处理软件ImageMagick的Ruby语言RMagick库支持。安装RMagick最麻烦，我查了N多资料试了N次才安装成功。
   1. 安装ImageMagick：sudo apt-get install imagemagick
   2. 查看安装结果：dpkg -l | grep magick
   3. 更新软件包列表：sudo apt-get update
   4. 安装图片处理软件包libmagick9-dev：sudo apt-get install libmagick9-dev ruby1.8-dev
   5. 安装接口软件包RMagick：sudo gem install rmagick
   6. 说明：如果出现问题或者错误请执行下面命令：sudo apt-get remove --purge libmagick9-dev

在irb里require 'RMagick'。如果返回true，表示安装成功。

第二步：编码

在models目录创建一个proof_image.rb

require 'rubygems'
require 'RMagick'
class ProofImage
  include Magick
  attr_reader :text, :image
  Jiggle  =   15
  Wobble  =   15

  def initialize(len = 4 )
    chars  =  ('a'..'z').to_a #  +  (' 0 '..' 9 ').to_a
    text_array = []
     1 .upto(len) {text_array  <<  chars[rand(chars.length)]}
    #background_type  =   " granite: "  #花岗岩
    #background_type  =   " netscape: "  #彩条
    #background_type  =   " xc:#EDF7E7 "  #指定背景色,例：xc:red
    #background_type  =   " null: "  #纯黑
    granite  =  Magick::ImageList. new (' null :')
    canvas  =  Magick::ImageList. new
    canvas.new_image( 32 * len,  50 , Magick::TextureFill. new (granite))
    gc  =  Magick::Draw. new
    gc.font_family  =  'times'
    gc.pointsize  =   40
    cur  =   10

    text_array.each{ | c |
      rand( 10 )  >   5   ?  rot = rand(Wobble):rot =   - rand(Wobble)
      rand( 10 )  >   5   ?  weight  =  NormalWeight : weight  =  BoldWeight
      gc.annotate(canvas, 0 , 0 ,cur, 30 + rand(Jiggle),c){
        self.rotation = rot
        self.font_weight  =  weight
        self.fill  =  'green'
      }
      cur  +=   30
    }
    @text  =  text_array.to_s
    @image  =  canvas.to_blob{
      self.format = " GIF "
    }

    #生成图片文件
    #text.text( 0 ,  0 ,  "   " )
    #text.draw(canvas)
    #canvas.write('test.gif') #图片位于项目根目录下。也可以使用linux中的绝对路径如: / home / chengang / test.gif

  end
end

在一个controller里加入一个方法，方法的作用是向网页提供图片数据。我选择创建一个专门的UtilController。

class UtilController  <  ApplicationController

  def proof_image
    proof_image  =  ProofImage. new
    session[:proof_text]  =  proof_image.text
    send_data proof_image.image, :type  =>  'image / jpeg', :disposition  =>  'inline'
  end

end

以下是在页面中的调用代码：

输入验证码: <%= text_field(:proof, :text, :maxlength => 4 )  %>
< img id = " img "  src = " /chen/util/proof_image " >
< a href = " # "  onclick = " changeImage();return false; " > 换一个验证码 </ a >< br />

其中changeImage()是一个javascript函数，因为换图片时必须改变<img的src，否则浏览器不会执行UtilController的proof_image方法，而是从缓存中取得图片数据。

function  changeImage(){
  $( " img " ).src  =   " /chen/util/proof_image?tmp= "   + new  Date().getTime();  //  Math.random();
}

我的环境：ubuntu 7.04 + Rails 1.2.3 +Ruby 1.8.5