文档章节

类似github上的自动生成头像

渺小的尘埃
 渺小的尘埃
发布于 2013/12/04 19:26
字数 1427
阅读 3938
收藏 4

现在在一些网站比如wordpress的博客,github等,看到用户默认的头像都是随机的一些图案,看似二维码似的。

其实有很多实现的方法,用PHP 的GD库生成或者用前端HTML5 canvas生成,都有。 我们先来说前端基于HTML5 jquery的生成方法: 首先你得需要这两个JS文件:

<!-- lang: js -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
                                
<script type="text/javascript" src="jquery.identicon5.js"></script>

然后,HTML 标签里包含一个md5的HASH 值:

<!-- lang: html -->
<ul>
    <li>071e3f61671e790fc492b583a01ae22b</li>
</ul>

最后调用方法:

<!-- lang: js-->
<script type="text/javascript">
                             
$(document).ready(function () {
                             
    $('li').identicon5();
});
                             
</script>

如果需要定义这个头像的大小,直接加上参数即可,例如:

<!-- lang: js-->
$('li').identicon5({size:50});

参考地址:http://francisshanahan.com/index.php/identicon5

由于考虑到目前的兼容性,我还是觉得直接用PHP 生成的比较靠谱。而且如果是批量生成的话,那么多次的HTTP请求也会影响程序效率。 代码如下:

<!-- lang: php-->
<?php
                      
/* generate sprite for corners and sides */
function getsprite($shape,$R,$G,$B,$rotation) {
    global $spriteZ;
    $sprite=imagecreatetruecolor($spriteZ,$spriteZ);
    imageantialias($sprite,TRUE);
    $fg=imagecolorallocate($sprite,$R,$G,$B);
    $bg=imagecolorallocate($sprite,255,255,255);
    imagefilledrectangle($sprite,0,0,$spriteZ,$spriteZ,$bg);
    switch($shape) {
        case 0: // triangle
            $shape=array(
                0.5,1,
                1,0,
                1,1
            );
            break;
        case 1: // parallelogram
            $shape=array(
                0.5,0,
                1,0,
                0.5,1,
                0,1
            );
            break;
        case 2: // mouse ears
            $shape=array(
                0.5,0,
                1,0,
                1,1,
                0.5,1,
                1,0.5
            );
            break;
        case 3: // ribbon
            $shape=array(
                0,0.5,
                0.5,0,
                1,0.5,
                0.5,1,
                0.5,0.5
            );
            break;
        case 4: // sails
            $shape=array(
                0,0.5,
                1,0,
                1,1,
                0,1,
                1,0.5
            );
            break;
        case 5: // fins
            $shape=array(
                1,0,
                1,1,
                0.5,1,
                1,0.5,
                0.5,0.5
            );
            break;
        case 6: // beak
            $shape=array(
                0,0,
                1,0,
                1,0.5,
                0,0,
                0.5,1,
                0,1
            );
            break;
        case 7: // chevron
            $shape=array(
                0,0,
                0.5,0,
                1,0.5,
                0.5,1,
                0,1,
                0.5,0.5
            );
            break;
        case 8: // fish
            $shape=array(
                0.5,0,
                0.5,0.5,
                1,0.5,
                1,1,
                0.5,1,
                0.5,0.5,
                0,0.5
            );
            break;
        case 9: // kite
            $shape=array(
                0,0,
                1,0,
                0.5,0.5,
                1,0.5,
                0.5,1,
                0.5,0.5,
                0,1
            );
            break;
        case 10: // trough
            $shape=array(
                0,0.5,
                0.5,1,
                1,0.5,
                0.5,0,
                1,0,
                1,1,
                0,1
            );
            break;
        case 11: // rays
            $shape=array(
                0.5,0,
                1,0,
                1,1,
                0.5,1,
                1,0.75,
                0.5,0.5,
                1,0.25
            );
            break;
        case 12: // double rhombus
            $shape=array(
                0,0.5,
                0.5,0,
                0.5,0.5,
                1,0,
                1,0.5,
                0.5,1,
                0.5,0.5,
                0,1
            );
            break;
        case 13: // crown
            $shape=array(
                0,0,
                1,0,
                1,1,
                0,1,
                1,0.5,
                0.5,0.25,
                0.5,0.75,
                0,0.5,
                0.5,0.25
            );
            break;
        case 14: // radioactive
            $shape=array(
                0,0.5,
                0.5,0.5,
                0.5,0,
                1,0,
                0.5,0.5,
                1,0.5,
                0.5,1,
                0.5,0.5,
                0,1
            );
            break;
        default: // tiles
            $shape=array(
                0,0,
                1,0,
                0.5,0.5,
                0.5,0,
                0,0.5,
                1,0.5,
                0.5,1,
                0.5,0.5,
                0,1
            );
            break;
    }
    /* apply ratios */
    for ($i=0;$i<count($shape);$i++)
        $shape[$i]=$shape[$i]*$spriteZ;
    imagefilledpolygon($sprite,$shape,count($shape)/2,$fg);
    /* rotate the sprite */
    for ($i=0;$i<$rotation;$i++)
        $sprite=imagerotate($sprite,90,$bg);
    return $sprite;
}
                          
/* generate sprite for center block */
function getcenter($shape,$fR,$fG,$fB,$bR,$bG,$bB,$usebg) {
    global $spriteZ;
    $sprite=imagecreatetruecolor($spriteZ,$spriteZ);
    imageantialias($sprite,TRUE);
    $fg=imagecolorallocate($sprite,$fR,$fG,$fB);
    /* make sure there's enough contrast before we use background color of side sprite */
    if ($usebg>0 && (abs($fR-$bR)>127 || abs($fG-$bG)>127 || abs($fB-$bB)>127))
        $bg=imagecolorallocate($sprite,$bR,$bG,$bB);
    else
        $bg=imagecolorallocate($sprite,255,255,255);
    imagefilledrectangle($sprite,0,0,$spriteZ,$spriteZ,$bg);
    switch($shape) {
        case 0: // empty
            $shape=array();
            break;
        case 1: // fill
            $shape=array(
                0,0,
                1,0,
                1,1,
                0,1
            );
            break;
        case 2: // diamond
            $shape=array(
                0.5,0,
                1,0.5,
                0.5,1,
                0,0.5
            );
            break;
        case 3: // reverse diamond
            $shape=array(
                0,0,
                1,0,
                1,1,
                0,1,
                0,0.5,
                0.5,1,
                1,0.5,
                0.5,0,
                0,0.5
            );
            break;
        case 4: // cross
            $shape=array(
                0.25,0,
                0.75,0,
                0.5,0.5,
                1,0.25,
                1,0.75,
                0.5,0.5,
                0.75,1,
                0.25,1,
                0.5,0.5,
                0,0.75,
                0,0.25,
                0.5,0.5
            );
            break;
        case 5: // morning star
            $shape=array(
                0,0,
                0.5,0.25,
                1,0,
                0.75,0.5,
                1,1,
                0.5,0.75,
                0,1,
                0.25,0.5
            );
            break;
        case 6: // small square
            $shape=array(
                0.33,0.33,
                0.67,0.33,
                0.67,0.67,
                0.33,0.67
            );
            break;
        case 7: // checkerboard
            $shape=array(
                0,0,
                0.33,0,
                0.33,0.33,
                0.66,0.33,
                0.67,0,
                1,0,
                1,0.33,
                0.67,0.33,
                0.67,0.67,
                1,0.67,
                1,1,
                0.67,1,
                0.67,0.67,
                0.33,0.67,
                0.33,1,
                0,1,
                0,0.67,
                0.33,0.67,
                0.33,0.33,
                0,0.33
            );
            break;
    }
    /* apply ratios */
    for ($i=0;$i<count($shape);$i++)
        $shape[$i]=$shape[$i]*$spriteZ;
    if (count($shape)>0)
        imagefilledpolygon($sprite,$shape,count($shape)/2,$fg);
    return $sprite;
}
                          
/* parse hash string */
$_GET["hash"] = md5('gy0624@foxmail.com.cn');
$_GET["size"] = '50px';
$csh=hexdec(substr($_GET["hash"],0,1)); // corner sprite shape
$ssh=hexdec(substr($_GET["hash"],1,1)); // side sprite shape
$xsh=hexdec(substr($_GET["hash"],2,1))&7; // center sprite shape
                          
$cro=hexdec(substr($_GET["hash"],3,1))&3; // corner sprite rotation
$sro=hexdec(substr($_GET["hash"],4,1))&3; // side sprite rotation
$xbg=hexdec(substr($_GET["hash"],5,1))%2; // center sprite background
                          
/* corner sprite foreground color */
$cfr=hexdec(substr($_GET["hash"],6,2));
$cfg=hexdec(substr($_GET["hash"],8,2));
$cfb=hexdec(substr($_GET["hash"],10,2));
                          
/* side sprite foreground color */
$sfr=hexdec(substr($_GET["hash"],12,2));
$sfg=hexdec(substr($_GET["hash"],14,2));
$sfb=hexdec(substr($_GET["hash"],16,2));
                          
/* final angle of rotation */
$angle=hexdec(substr($_GET["hash"],18,2));
                          
/* size of each sprite */
$spriteZ=128;
                          
/* start with blank 3x3 identicon */
$identicon=imagecreatetruecolor($spriteZ*3,$spriteZ*3);
imageantialias($identicon,TRUE);
                          
/* assign white as background */
$bg=imagecolorallocate($identicon,255,255,255);
imagefilledrectangle($identicon,0,0,$spriteZ,$spriteZ,$bg);
                          
/* generate corner sprites */
$corner=getsprite($csh,$cfr,$cfg,$cfb,$cro);
imagecopy($identicon,$corner,0,0,0,0,$spriteZ,$spriteZ);
$corner=imagerotate($corner,90,$bg);
imagecopy($identicon,$corner,0,$spriteZ*2,0,0,$spriteZ,$spriteZ);
$corner=imagerotate($corner,90,$bg);
imagecopy($identicon,$corner,$spriteZ*2,$spriteZ*2,0,0,$spriteZ,$spriteZ);
$corner=imagerotate($corner,90,$bg);
imagecopy($identicon,$corner,$spriteZ*2,0,0,0,$spriteZ,$spriteZ);
                          
/* generate side sprites */
$side=getsprite($ssh,$sfr,$sfg,$sfb,$sro);
imagecopy($identicon,$side,$spriteZ,0,0,0,$spriteZ,$spriteZ);
$side=imagerotate($side,90,$bg);
imagecopy($identicon,$side,0,$spriteZ,0,0,$spriteZ,$spriteZ);
$side=imagerotate($side,90,$bg);
imagecopy($identicon,$side,$spriteZ,$spriteZ*2,0,0,$spriteZ,$spriteZ);
$side=imagerotate($side,90,$bg);
imagecopy($identicon,$side,$spriteZ*2,$spriteZ,0,0,$spriteZ,$spriteZ);
                          
/* generate center sprite */
$center=getcenter($xsh,$cfr,$cfg,$cfb,$sfr,$sfg,$sfb,$xbg);
imagecopy($identicon,$center,$spriteZ,$spriteZ,0,0,$spriteZ,$spriteZ);
                          
// $identicon=imagerotate($identicon,$angle,$bg);
                          
/* make white transparent */
imagecolortransparent($identicon,$bg);
                          
/* create blank image according to specified dimensions */
$resized=imagecreatetruecolor($_GET["size"],$_GET["size"]);
imageantialias($resized,TRUE);
                          
/* assign white as background */
$bg=imagecolorallocate($resized,255,255,255);
imagefilledrectangle($resized,0,0,$_GET["size"],$_GET["size"],$bg);
                          
/* resize identicon according to specification */
imagecopyresampled($resized,$identicon,0,0,(imagesx($identicon)-$spriteZ*3)/2,(imagesx($identicon)-$spriteZ*3)/2,$_GET["size"],$_GET["size"],$spriteZ*3,$spriteZ*3);
                      
/* make white transparent */
imagecolortransparent($resized,$bg);
                          
/* and finally, send to standard output */
header("Content-Type: image/png");
imagepng($resized);

然后服务器上运行该脚本,就会出现你这个HASH值对应的唯一头像啦。

还有一个简单生成的方法,就是直接调用gravatar库:

<!-- lang: php -->
$email = "someone@somewhere.com";
$default = "http://www.somewhere.com/homestar.jpg";
$size = 40;
$grav_url = "http://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=" . urlencode( $default ) . "&s=" . $size;

所以生成的头像图片:

<!-- lang: php -->
<img src="<?php echo $grav_url; ?>" alt="" />

总结归纳函数如下:

<!-- lang: php-->
/**
 * Get either a Gravatar URL or complete image tag for a specified email address.
 *
 * @param string $email The email address
 * @param string $s Size in pixels, defaults to 80px [ 1 - 2048 ]
 * @param string $d Default imageset to use [ 404 | mm | identicon | monsterid | wavatar ]
 * @param string $r Maximum rating (inclusive) [ g | pg | r | x ]
 * @param boole $img True to return a complete IMG tag False for just the URL
 * @param array $atts Optional, additional key/value attributes to include in the IMG tag
 * @return String containing either just a URL or a complete image tag
 * @source http://gravatar.com/site/implement/images/php/
 */
function get_gravatar( $email, $s = 80, $d = 'mm', $r = 'g', $img = false, $atts = array() ) {
    $url = 'http://www.gravatar.com/avatar/';
    $url .= md5( strtolower( trim( $email ) ) );
    $url .= "?s=$s&d=$d&r=$r";
    if ( $img ) {
        $url = '<img src="' . $url . '"';
        foreach ( $atts as $key => $val )
            $url .= ' ' . $key . '="' . $val . '"';
        $url .= ' />';
    }
    return $url;
}

只不过这样增加了HTTP请求次数,每个用户都要请求一次。可以加缓存,但是更新头像的时候,又得麻烦,得同时更新下缓存。看大家喜好吧。

© 著作权归作者所有

共有 人打赏支持
渺小的尘埃
粉丝 3
博文 30
码字总数 16498
作品 0
海淀
程序员
私信 提问
PHP头像生成类--Material Design Avatars

新用户头像一个是个麻烦事,很多网站直接放个灰色头像,一点美感都没有。 正好觉得Android上的Gmail和Messager的生成的头像挺不错的,我就自己写了一个生成这种头像的PHP类,字体用的Adobe的...

lincanbin
2015/05/01
1K
0
PHP头像生成类 Material Design Avatars 发布

新用户头像一个是个麻烦事,很多网站直接放个灰色头像,一点美感都没有,也不具备辨识度。 上图为Android下的Google Messager 正好觉得Android上的Gmail和Messager的生成的头像挺不错的,就实...

lincanbin
2015/05/01
4.6K
22
强力推荐!那些你不能错过的 GitHub 插件和工具

以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流。 Gi...

亦枫
2017/09/05
0
0
Android 仿钉钉、微信 群聊组合头像

功能 生成类似钉钉、微信 群聊组合头像Bitmap 可使用图片资源id、bitmap或者使用url从网络加载,传入对应数组即可 网络加载时支持线程池 支持磁盘缓存、内存缓存 对图片资源进行采样率压缩 ...

Othershe
06/27
0
0
github在不同电脑上协同开发

当我换了电脑后,开发自己的github项目遇到了一些问题。 首先,git clone 'repository url'拉取下来项目,开始开发项目发。修改了一些文件后,当要git commit, git push的时候,发现提交不上...

Damon风
07/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
0
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
0
0
Mybatis 学习笔记四 MyBatis-Plus插件

Mybatis 学习笔记四 MyBatis-Plus插件 maven依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus</artifactId> <ve......

晨猫
昨天
2
0
小白带你认识netty(二)之netty服务端启动(下)

承接上一篇小白带你认识netty(二)之netty服务端启动(上),还剩下两步骤:3、注册Selector:将Channel注册到Selector上 和 4、端口的绑定:服务端端口的监听。 3、注册Selector:将Chann...

天空小小
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部