晓风博客

一片荒芜的地方

【极客教程】在图片上显示访问者的QQ号和昵称

很多人在QQ空间里都能看到一些图片上会有自己的QQ号码之类的，感觉很神奇。今天网络极客就给大家普及一下这种奇怪的图片是如何做出来的。废话不多说，下面开始！

一、最终效果

在图片上显示出你的QQ和昵称以及浏览器信息

当在你自己的空间时就会看到QQ号是你自己的，而浏览器信息也是自己的，当然还有昵称也是自己的昵称。看似很神奇，到底是怎么做出来的呢？

二、原理分析

首先呢，这个东西是在自己空间才能看到的。所以可以肯定的是这牵扯到了自己的账号登陆相关信息。其次这个图片是动态变化的，所以可以肯定不是用PS之类的P图P上去的，而是使用编程语言动态生成的。生成图片很多语言都可以，本例采用PHP来生成图片。

为了不对高手啰嗦，下面直接上源码，自行下载：

http://pan.baidu.com/s/1j79kT

完全的源码，毫无修改。

三、部分代码讲解

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

<?php
$ment =  $_SERVER["HTTP_REFERER"];
if($ment == 'http://cnc.qzs.qq.com/qzone/newblog/v5/editor.html'){
        header("HTTP/1.0 500 Internal Server Error");
exit;}
preg_match("#[0-9]{5,11}#",$ment,$rr);
$qqnumber=$rr[0];
$webtext = file_get_contents('http://liyaodong.sinaapp.com/qzoneapi/qqinfo-service.php?qq='.$qqnumber);
$temp1 = explode('[',$webtext);
$temp2 = explode(',',$temp1[1]);
$nickname = $temp2[6];
ob_clean();
$userBrowser = userBrowser();
function userBrowser(){
       $user_OSagent = $_SERVER['HTTP_USER_AGENT'];

        if(strpos($user_OSagent,"Maxthon") && strpos($user_OSagent,"MSIE")) {
           $visitor_browser ="Maxthon(Microsoft IE)";
       }elseif(strpos($user_OSagent,"Maxthon 2.0")) {
            $visitor_browser ="Maxthon 2.0";
       }elseif(strpos($user_OSagent,"Maxthon")) {
           $visitor_browser ="Maxthon";
        }elseif(strpos($user_OSagent,"MSIE 9.0")) {
           $visitor_browser ="MSIE 9.0";
       }elseif(strpos($user_OSagent,"MSIE 8.0")) {
            $visitor_browser ="MSIE 8.0";
       }elseif(strpos($user_OSagent,"MSIE 7.0")) {
            $visitor_browser ="MSIE 7.0";
        }elseif(strpos($user_OSagent,"MSIE 6.0")) {
           $visitor_browser ="MSIE 6.0";
        } elseif(strpos($user_OSagent,"MSIE 5.5")) {
            $visitor_browser ="MSIE 5.5";
        } elseif(strpos($user_OSagent,"MSIE 5.0")) {
            $visitor_browser ="MSIE 5.0";
        } elseif(strpos($user_OSagent,"MSIE 4.01")) {
          $visitor_browser ="MSIE 4.01";
        }elseif(strpos($user_OSagent,"MSIE")) {
           $visitor_browser ="MSIE >=10.0";
      }elseif(strpos($user_OSagent,"NetCaptor")) {
            $visitor_browser ="NetCaptor";
        } elseif(strpos($user_OSagent,"Netscape")) {
           $visitor_browser ="Netscape";
      }elseif(strpos($user_OSagent,"Chrome")) {
           $visitor_browser ="Chrome";
        } elseif(strpos($user_OSagent,"Lynx")) {
          $visitor_browser ="Lynx";
       } elseif(strpos($user_OSagent,"Opera")) {
           $visitor_browser ="Opera";
        } elseif(strpos($user_OSagent,"Konqueror")) {
            $visitor_browser ="Konqueror";
        } elseif(strpos($user_OSagent,"Mozilla/5.0")) {
            $visitor_browser ="Mozilla";
        } elseif(strpos($user_OSagent,"Firefox")) {
           $visitor_browser ="Firefox";
       }elseif(strpos($user_OSagent,"U")) {
            $visitor_browser ="Firefox";
       } else {
           $visitor_browser ="unknow";
        }
        return $visitor_browser;
}
 $nickname = iconv("GBK","UTF8//IGNORE",$nickname);
 $nickname = str_replace('&quot;', '', $nickname);
 $qqnumber = '   '.$qqnumber;
 $userBrowser = $userBrowser.' '.'Browser'.'   ';
  $f = new SaeFetchurl();
 $img_data = $f->fetch( 'http://i1168.photobucket.com/albums/r494/xiaofengdongdong/1-1.jpg' );
 $img = new SaeImage();
 $img->setData( $img_data);
 //实例化SaeImage并取得最大一张图片的大小，稍后用于设定合成后图片的画布大小
 //执行合成
 $img->annotate($nickname,$opacity = 0.8,$gravity = 2,$font = array("name"=>SAE_MicroHei, "size"=>30, "weight"=>150, "color"=>"black"));
 $img->annotate($qqnumber,$opacity = 0.8,$gravity = 4,$font = array("name"=>SAE_MicroHei, "size"=>20, "weight"=>300, "color"=>"black"));
 $img->annotate($userBrowser,$opacity = 0.8,$gravity = 6,$font = array("name"=>SAE_MicroHei, "size"=>20, "weight"=>300, "color"=>"black"));
 //输出图片
 $img->exec('jpg', true);
?>

这段代码中最需要理解的一个就是HTTP REFERER，这是整个程序的核心。当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器籍此可以获得一些信息用于处理。因此当你从QQ空间访问到该图片时就会有Referer告诉服务器你是从哪里点过来的，而这个Referer里就藏有你的QQ号码。使用Google Chrome的同学可以按F12打开开发者工具，查看某个HTML文档的Header就可以找到该文档的Referer信息。

依次点击Network-Qzoneapi也就是你要查看Referer的HTML文档，然后点击Header头部信息就可以看到HTTP Referer信息，可以看到uin后边跟着的就是QQ号码信息。

在你获得了点击来源之后，下面需要做的就是把Referer信息中的QQ号提取出来，然后再通过QQ空间的API查询该QQ号码的相关信息。这个API的地址就是

http://base.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=123456789

uins后边跟着你要查询的QQ号码就可以了。在你访问之后返回的数据是JSON格式的：

portraitCallBack({"123456789":["http://qlogo2.store.qq.com/qzone/123456789/123456789/100",91922,-1,8,0,1,"今日观察",0]})`

然后再用PHP对返回的数据进行解析，可以得到的信息有该QQ号码的头像地址、昵称、QQ号码等信息。

得到相关数据后接下来要做的就是把这些信息通过PHP或者其他你喜欢的语言生成图片就可以了。就像图片加水印的原理一样，先用PS美化好一张底图，然后再设置文字大小、位置、颜色等信息。然后再输出到浏览器里。大功告成。

四、在QQ空间发布

如果你直接在空间里用说说或者日志插入你会发现无法插入，因为地址格式不对，地址的后缀不是jpg或者png结尾的。所以这个时候需要用到一点HTML代码的知识。在日志中可以切换到HTML输入，在右上角。切换到HTML代码输入后在日志中写<img src="你的动态图片地址" />这样就可以插入进去了。

总的来说没有多少技术含量，对于PHP大神来说都是小菜一碟的事情。由于时间仓促，代码写的很凌乱，各位大神不喜勿喷，欢迎加入网络极客QQ群：277076455一同交流。