Canvas API 设计用于网页浏览器中绘制图形。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面，也可用于通过浏览器指纹识别进行在线跟踪。该技术依赖于画布图像在不同网络浏览器和平台上呈现方式的变化，以创建用户浏览器的个性化数字指纹。但它在完全相同设备环境下是有可能重复的。

Canvas 功能检测

• Canvas 2D API
• Text API for Canvas
• Canvas toDataURL（常用于指纹识别）
• OffscreenCanvas API
• Canvas native

  Canvas toDataURL 函数也能被浏览器插件修改，但很容易被识别

• 稳定性

  同台设备和浏览器环境下，canvas 具有稳定性

• 非人为噪音

  部分指纹浏览器或指纹插件可以在 canvas 噪音添加参数，但仍有可能被识别

图像详情

Canvas 指纹产生的原因

Canvas 图像在画布上的呈现方式可能会因网页浏览器、操作系统、显卡和其他因素而异，从而产生可用于创建指纹的独特图像。

1. 抗锯齿

抗锯齿技术相当于一种美颜滤镜，它被广泛使用。如果操作系统中未启用字体平滑功能，某些字体在计算机显示器上看起来会很糟糕。一般来说，windows 操作系统会默认开启字体和图像平滑。在 Mac OS X 中，抗锯齿似乎仅适用于低于特定大小的字体。不仅在操作系统级别，部分浏览器也会内置自己的抗锯齿技术，如 Safari 使用自己的内置字体渲染引擎。而最重要的是，抗锯齿技术在 Canvas 上绘制字体和图像时同样生效。

如下图所示，左边是未启用字体平滑的状态，而右边是启用:

抗锯齿技术会生成一些非纯色的像素，这些中间状态的像素值又受到显卡的色彩配置文件的影响，进而导致其颜色可能会不尽相同，我们称其为噪音。在足够大的画布中，绘制相同字体和图像，再计算所有像素数据，便可以得到相对唯一的指纹数据。

2. 字体微调（Font Hinting）

微调的一个特点是网格拟合，即通过修改字体字符的字高和字宽，让字符与屏幕显示的设置像素网格对齐。图像显示到屏幕上是一个个小方块网格，字体可能会左右移动以确保正确显示在网格上，这样也是为了在不同屏幕下字体形状及排版看起来大致相同。

通过以下GIF图像是几十个不同用户的canvas图像的合集，可以直观看出，相同的代码在不同的设备环境下呈现的差异：

如上述图像详情所示，一般来说，我们可以调用 toDataURL 函数获取 Canvas 图像的 base64 数据，也可以从 Canvas 生成的 PNG 图像的数据块中获取 IDAT 块的 CRC 校验和。然后我们可以计算该字符串（base64 或 CRC 校验和）的哈希值(具体算法因各网站而异)来作为 Canvas 指纹。

注意：Canvas 指纹在不同网站各不相同的原因有很多，使用的字符串不同（base64 或 CRC 校验和），哈希值算法不同（MD5, SHA, MUMUHASH, etc.）都会使 Canvas 指纹完全不同，但真实的 Canvas 指纹是稳定的，所以在相同浏览器和设备环境下，同个网站下的 Canvas 指纹是固定的。这也是 Canvas 指纹用于用户辅助识别的理论基础，它具有稳定性质。