前端开发中经常会需要区分用户的设备信息,如何区分浏览器,获得唯一的浏览器标识呢?可以从硬件入手,因为浏览器渲染canvas时,渲染算法和参数不同,因此绘制成的图片CRC校验参数也不一样,因此可以根据canvas获得浏览器指纹信息,进而生成唯一标识。
代码如下:1
2
3
4
5
6
7
8
9
10
11
12
13function visitorId () {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 240
canvas.height = 60
ctx.font = '11pt "Times New Roman"'
ctx.fillStyle = '#f60'
ctx.fillRect(100,1,62,20)
ctx.fillText('😃', 2,20)
return MD5(ctx.canvas.toDataURL('image/png'))
}
以上代码对于不同的浏览器渲染引擎会有不同效果,相同引擎结果相同,要想相同引擎不同浏览器则需要更多特征,比如声音渲染等。
你的ID: