logs.com/leijing0607/p/8044218.html

从根本上来说每一种浏览器都会使用不同的图像处理引擎不同的导出选项不同的压缩等级所以每一台电脑绘制出的图形都会有些许不同这些图案可以被用来给用户设备分配特定编号指纹也就是说可以用来识别不同用户。

function

document.createElement(canvas);var

ctx

#f60;ctx.fillRect(125,1,62,20);ctx.fillStyle

15);ctx.fillStyle

canvas.toDataURL().replace(data:image/png;base64,,);var

bin

bin2hex(bin.slice(-16,-12));return

crc;

}console.log(getUUID(https://www.baidu.com/));测试结果表明同一浏览器访问该域时生成的CRC校验码总是不变。

可以简单理解为同样的HTML

Canvas元素绘制操作在不同的操作系统不同的浏览器上产生的图片内容其实是不完全相同的。

出现这种情况可能是有几个原因

在图片格式上不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。

在像素级别来看操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。

即使是相同的绘图操作最终产生的图片数据在hash层面上依然是不同的。

笔者测试数据如下

Chrome浏览器和遨游浏览器结果一样安卓移动端Chrome浏览器iOS端Safari浏览器、微信

Safari浏览器和微信结果一样

笔者测试结论还是会出现结果一样的情况而且最终生成的uuid位数较短也增加了出现相同的几率。

该方法不可取

成熟框架

fingerprintjs笔者是在这个网站知晓的https://q.shanyue.tech/fe/js/28里面有很大大厂前端面试的问题可以深入学习用。

script//

import(https://openfpcdn.io/fingerprintjs/v4).***n(FingerprintJS

Get

result.visitorIdconsole.log(visitorId)})

/script虽然注释写的是在Firefox中有可能不工作但是笔者测试PC上Firefox正常工作。

在其API文档中有提供其它方式的植入示例比如浏览器script标签、TS的方式。