类似github上的自动生成头像
类似github上的自动生成头像
渺小的尘埃 发表于4年前
类似github上的自动生成头像
  • 发表于 4年前
  • 阅读 3000
  • 收藏 3
  • 点赞 2
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

>现在在一些网站比如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请求次数,每个用户都要请求一次。可以加缓存,但是更新头像的时候,又得麻烦,得同时更新下缓存。看大家喜好吧。

共有 人打赏支持
粉丝 4
博文 30
码字总数 16498
×
渺小的尘埃
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: