[原创] 根据用户名生成用户默认头像

rails letter_avatar

2016-01-14 7188

在平时的开发中经常会遇到用户注册后没有上传头像的问题。一般的解决办法我们都会给用户设置一个默认头像,然后了事。这样子没有什么不好的,就是显得不够友好。看到gmail根据用户名生成的字母头像很是nb,于是乎就想到了何不自己已实现一下呢。

最初的思路是直接先做好几张图片,然后获取用户名的首字母,根据首字母去取对应的图片就了事了。不过觉得不够高大上。于是想到了实用html5的canvas自己绘制一张图,但是由于某些浏览器的问题,暂时放置一旁了。就想到了这种服务器端生成的方式。google了一下后,找到了这个gem。感谢https://ruby-china.org/

https://github.com/ksz2k/letter_avatar

具体怎么用的作者已经写的很详细了。

我只是借来用而已。为了解决某些变态的汉字问题,还用到了这个https://github.com/janx/ruby-pinyin

其实很简单,在controller中把用户名进行一下处理,取出第一个字母,然后调用生成图片就好。最终效果为:http://lixuanqi.com/common/letter_avatar


def letter_avatar
    page_head_data('生成字母头像','根据输入的用户名生成首字母头像','根据输入的用户名生成首字母头像')
    @first_letter = ''
    if !params[:name].blank?
      # 防止输入汉字,把汉字转拼音后取第一个字母
      @first_letter = PinYin.of_string(params[:name]).join.first
    end
    # render :layout => false
  end


视图部分代码


<div class="row" style="padding-top: 30px;">
  <div class="col-md-6 col-md-offset-3">
    <%
       if @first_letter.blank?
    %>
        <form method="get" id="form">
          <div class="form-group">
            <label>请输入名称</label>
            <input name="name" class="form-control" value=""/>
            <button style="float:right;margin-top: 10px;width: 120px" class="btn btn-info" type="submit">生成</button>
          </div>
        </form>
    <%
       else %>
        <p style="text-align: center">
          <img class="img-circle" src="/<%= letter_avatar_for(@first_letter, 200).gsub('public/', '') %>"/>
        </p>

        <p style="text-align: center">
          <a href="/common/letter_avatar" class="btn btn-success">重新生成</a>
        </p>
    <%
       end
    %>
  </div>
</div>