浅谈Heatmap技术

　　客户端使用通过GET方法触发一个空HTML页面，当然，还可以更简单点：

　　之所以要记录屏幕分辨率是因为有的情况下需要修正点击坐标。比如说，一个居中显示的定宽的页面，其同一个位置在不同分辨率下的坐标是不同的，当渲染图片的时候，坐标需要以一个分辨率为准进行修正。

　　另外，如果用户正在拖动滚动条，是不应该记录的。

　　分析日志

　　客户端使用Ajax通过GET方法触发一个空HTML页面，如此就会在服务端留下日志：

　　至于数据的持久化，是使用MongoDB或者别的，自己定夺，这里就不多说了。

　　渲染图片

　　出于演示方便的考虑，我使用了一些随机生成的数据，以Imagick为例，代码如下：

　　代码虽然很多，但并不复杂，其中用到了两个图片，分别是：plot.png和clut.png。实际应用时，有时候点击量会非常大，此时没有必要把所有的点击都渲染出来，而应该采取随机取样的策略，如果采用MongoDB持久化的话，可以参考：The Random Attribute。

　　备注：代码参考image-tempest。

　　最终展示

　　形象一点来说，其实就是通过CSS+把生成的图片盖在网页上，并调节图片透明度来达到合二为一的效果，篇幅所限，具体代码留给大家自己实现，例子效果可参考下图：

　　

　　Heatmap

　　BTW：热点可能会随着时间改变，为了能对照某个时间的网页，可以使用CutyCapt截屏。顺手再贴一个相关的项目：smt2(simple mouse tracking)。

　　有关Heatmap的详细介绍，还可以参考

　　How to make heat maps

　　The definitive heatmap

　　收工!Heatmap虽然不是很复杂的技术，但涉及的方面却很繁杂，希望本文能帮到大家。