类似github上的自动生成头像
现在在一些网站比如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 值:
<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请求也会影响程序效率。
代码如下：
<?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('[email protected]');
$_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库：
$email = "[email protected]";
$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;
所以生成的头像图片：
<img src="<?php echo $grav_url; ?>" alt="" />
总结归纳函数如下：
/**
* 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请求次数，每个用户都要请求一次。可以加缓存，但是更新头像的时候，又得麻烦，得同时更新下缓存。看大家喜好吧。