Rails-Gem-使用 avatar_magick 生成 gmail 头像效果

# 摘要
其实通常来讲头像生成都是用 gravatar,但是是在外网,内网部署就会很麻烦,所以这里使用[avatar_magick](https://github.com/bjedrocha/avatar_magick) 它可以根据用户名生成 google 风格的用户名缩略头像,基本使用方式参考[使用指南](http://bjedrocha.com/rails/2016/01/06/default-gmail-style-avatars-in-rails/)
# 步骤
首先先安装 gem`gemfile`
```
# 头像生成
gem 'dragonfly', '~> 1.1.4'
gem 'avatar_magick'
# 拼音
gem 'chinese_pinyin'
```
安装插件
```
bundle install
```
初始化 dragonfly配置,理论上可以直接`rails g dragonfly`,但是要存储生成的图片,这里避免麻烦就不存了.
```
$ touch app/config/initializers/dragonfly.rb
```
写入plugin 配置`app/config/initializers/dragonfly.rb`
```
require 'dragonfly'

# Configure
Dragonfly.app.configure do
  plugin :imagemagick
  plugin :avatarmagick
end
```
加入头像生成路由`config/route.rb`
```
  # 头像动态生成
  get "avatar/:size/:background/:text" => Dragonfly.app.endpoint { |params, app|
    app.generate(:initial_avatar, URI.unescape(params[:text]), { size: params[:size], background_color: params[:background] })
  }, as: :avatar
```
现在已经可以通过这个 url 随意生成 logo 了,比如`http://localhost:3000/avatar/250/d81b60/bart`
![屏幕快照 2018-03-11 00.55.51.png](https://i.loli.net/2018/03/11/5aa40e33342c7.png)

建立一个 model 的辅助模块
```
$ touch app/models/concerns/avatarable.rb
```
`app/models/concerns/avatarable.rb`
```
# app/models/concerns/avatarable.rb
module Avatarable
  extend ActiveSupport::Concern

AVATAR_COLORS = [ 'e53935', 'b71c1c', 'd81b60', '880e4f', '8e24aa', '4a148c',
    '5e35b1', '311b92', '3949ab', '1a237e', '1e88e5', '0d47a1', '039be5', '01579b',
    '00acc1', '006064', '00897b', '004d40', '43a047', '1b5e20', '7cb342', '33691e',
    'c0ca33', '827717', 'fdd835', 'f57f17', 'ffb300', 'ff6f00', 'fb8c00', 'e65100',
    'f4511e', 'bf360c', '6d4c41', '3e2723', '757575', '212121', '546e7a', '263238' ]

included do
    delegate :url_helpers, to: 'Rails.application.routes'
  end

def avatar_magick_url
    url_helpers.send(:avatar_path, avatar_size, avatar_color, avatar_text)
  end

def avatar_size
    150
  end

def avatar_param
    to_param
  end

def avatar_color
    AVATAR_COLORS[ Zlib.crc32( avatar_param ).modulo( AVATAR_COLORS.length ) ]
  end
end
```
最终在真正需要添加头像的 model 上应用
```
class User < ApplicationRecord

extend Dragonfly::Model
  include Avatarable

...
  
  # 头像字符
  def avatar_text
    name_pinyin.chr
  end

# 全名
  def name_pinyin
    Pinyin.t(self.name)
  end
end
```
在 helper 里面加入这个 image_tag
```
module ApplicationHelper
  ...  
  # 头像生成器
  def user_avatar(user, options = {})
    # 如果用户没有头像,就生成一个,有的话就用自带的
    if user.avatar.nil?
      image_tag user.avatar_magick_url, options
    else
      image_tag user.avatar_url, options
    end
  end
  
end
```
在前端view调用
```
<%= user_avatar(current_user, class: 'media-object img-circle', style: 'width:64px;height:64px;') %>
```
图片动态调整大小只需要在外围套一层 thum的 div就好
```
      <div class="col-md-2 col-sm-4 col-xs-12">
        <a href="#" class="thumbnail">
          
          <%= render 'common/user_edit_avatar' %>
        </a>            
      </div>
```
最终效果
![屏幕快照 2018-03-11 01.20.12.png](https://i.loli.net/2018/03/11/5aa413e9bb4c7.png)

Liangchao's blog

最近发表

友情链接