qq空间[神奇图片]的制作原理 - CNode技术社区

相信很多人都看到过qq空间转发的某条日志中有张神奇图片 会显示你的头像,个人qq等信息。很神奇的样子。我对这个有点兴趣,再加上我最近想学node,于是前天晚上开始从nodejs.org的主页hello,word开始学起。用了半天写出了这个简单的神奇图片 制作服务器。

首先是名词解释,允许我用度娘的链接HTTP_REFFER

通过referer的名词解释可以知道访问外部图片的时候会带上此次浏览的信息,那我们就去看看qq空间的referer信息有哪些?

我在这里用的IE的开发者工具分析,大多数浏览器都有这个功能。

我个人测试qq号的REFERER信息

从这幅图中的REFERER可以看到我个人的qq号。于是我就想把这个图片链接到我个人图片服务器不就行了吗。

http.createServer(function (request, response) {
 fs.readFile('default.png', 'binary', function (err, file) {
 response.writeHead(200, {'Content-Type': 'image/png'});
 response.write(file, 'binary');
 response.end();
 });
}).listen(8080, '127.0.0.1');

这是最简单的读取本地图片并显示的服务器代码。

下面开始增加对refer的判断。我通过http检测工具知道,只有在qq空间的个人中心才能获取到此人的qq号,而在其他位置,如:日志正文,手机qq等页面都是没有此referer的,所以此神奇图片只能在个人中心浏览之后,再加上缓存才能在pc端的其他页面看到。

代码如下:

var http = require('http');
var url = require('url');
var fs = require('fs');
http.createServer(function (request, response) {
 // 如果没有referer就算显示默认图片
 if (!request.headers.referer) {
 return showDefaultPng();
 }
 // referer不是从个人中心过来的也显示默认图片 
 var aQQ = url.parse(request.headers.referer).pathname.match(/\d+/);
 if(aQQ===null) {
 return showDefaultPng();
 }
 // 从腾讯的接口获取qq号对应的个人信息
 http.get('http://base.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=' + aQQ[0], function (res) {
 var infoBuffer = [];
 res.on('data', function (data) {
 infoBuffer.push(data);
 });
 res.on('end', function () {
 var sInfo = Buffer.concat(infoBuffer);
 var aInfo = sInfo.toString().replace(/"/g, "").match(/\[(.+)\]/);
 if (!aInfo) {
 // 如果不能获取到个人信息,依然显示默认图片
 return showDefaultPng();
 }
 else {
 // 如果能正确获取信息,就需要从qq图片服务器拉取头像
 var a = aInfo[1].split(',')[0];
 var req = http.request({'hostname': url.parse(a).hostname, 'method': 'get', 'port': '80', 'path': url.parse(a).pathname}, function (res) {
 var data = [];
 res.on('data', function (chunk) {
 data.push(chunk);
 });
 res.on('end', function () {
 var buffer = Buffer.concat(data);
 // 增加缓存,并发送出去
 response.writeHead(200, {'Content-Type': 'image/png',
 'Cache-Control': 'public,max-age=31536000'
 });
 response.write(buffer, 'binary');
 response.end();
 });
 });
 req.end();
 }
 });
 });
 function showDefaultPng() {
 fs.readFile('default.png', 'binary', function (err, file) {
 response.writeHead(200, {'Content-Type': 'image/png'});
 response.write(file, 'binary');
 response.end();
 });
 }
}).listen(8080, '127.0.0.1');
console.log('Server running at http://127.0.0.1:8080/');

http://base.qzone.qq.com/fcg-bin/cgi_get_portrait.fcg?uins=你的qq号 这个链接可以查询到你的qq的基本信息。

ps: 我有两年的JS经验,两年的JAVA经验,搭过express和mongo的个人博客经验,所以也不能说是完全的node新手。