共计 3674 个字符，预计需要花费 10 分钟才能阅读完成。
哈喽, 大家好 我是
xy👨🏻💻. 作为一名前端开发工程师, 应该都用过H5中的canvas吧!!! 然而你真的理解它吗？Canvas '指纹识别'技术又是什么？本文将由浅入深，带你理解Canvas '指纹识别'技术
什么是 Canvas
Canvas API（画布）是在 HTML5 中新增的标签用于在网页实时生成图像，并且能够操作图像内容，基本上它是一个能够用 JavaScript 操作 的位图（bitmap）。
Canvas 对象示意一个 HTML 画布元素 <canvas></canvas>。它没有本人的行为，然而定义了一个 API 反对脚本化客户端绘图操作。
Canvas 能做什么
- 根底图形的绘制
- 文字的绘制
- 图形的变形和图片的合成
- 图片和视频的解决
- 动画的实现
- 小游戏的制作
随着互联网的倒退，用户对页面的 视觉 和交互 有着更高的要求，传统的 web 前端开发无奈失去满足，所以利用弱小的Canvas 绘图能力，能够是网页显示的内容更加的丰富多彩，Canvas 在给用户带来更好的视觉和交互上的体验。
顺手绘制一个简略的图形
<!-- html -->
<body>
<canvas
id="canvas_xy"
width="500"
height="400"
style="box-shadow: 0 0 20px black"
>
以后浏览器不反对 canvas
</canvas>
</body>
<!-- js -->
<script type="text/javascript">
// 获取 canvas 元素对应的 DOM 对象
var canvas_xy = document.getElementById("canvas_xy");
// 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
var ctx = canvas_xy.getContext("2d");
// 设置绘制终点
ctx.moveTo(100, 100);
// 设置绘制下一个点
ctx.lineTo(200, 200);
// 设置绘制下一个点
ctx.lineTo(400, 100);
// 完结绘制
ctx.closePath();
// 设置线的宽度
ctx.lineWidth = 10;
// 设置绘制的款式
ctx.strokeStyle = "red";
// 绘制点之间的线路
ctx.stroke();
// 设置填充款式
ctx.fillStyle = "green";
// 填充以后视图
ctx.fill();
</script>成果如下：
曾经理解了 Canvas 的根本应用的同学必定会问，它和 指纹识别 有什么关系呢？其实这里说的指纹识别并不是真正的 指纹识别技术，而是利用了Canvas 在不同操作系统、不同浏览器上，产生的图片内容不完全相同（咱们肉眼是无奈辨别的）来标识用户。
既然提到 Canvas 指纹 ，那必定也会想到 浏览器指纹 了，这两种有什么区别和关联呢？
别急！！！一起来看看 浏览器指纹 和Canvas 指纹
浏览器指纹
个别状况下，网站或者广告商都想要一种技术能够在网络上准确的定位到每一个个体，这样就能够通过收集这些个体的数据，而后加以分析之后更加准确的去推送广告和其余的一些流动。Cookie 技术是十分受欢迎的一种。当用户拜访一个网站时，网站能够在用户以后的浏览器 Cookie 中永恒植入一个含有惟一标示符（UUID）的信息，并通过这个信息将 用户所有行为（浏览了哪些页面？搜寻了哪些关键字？对什么感兴趣？点了哪些按钮？用了哪些性能？看了哪些商品？把哪些放入了购物车等等）关联起来。
而随着网民对个人隐私的器重，Cookie 越来越不受待见。不少平安工具甚至是浏览器都开始容许或疏导用户敞开 Cookie 性能，比方很多支流浏览器都有一个 “隐衷模式浏览” 性能。同时，咱们能够很不便的应用浏览器的快捷键革除缓存，这样在两次拜访的区间也就无奈辨认是否是同一个用户，这样一来，网站就很难追踪用户行为了。
这个时候 浏览器指纹 也就应运而生。
如何获取浏览器指纹?
想必大家肯定晓得浏览器 navigator 对象 吧，通过 navigator 对象咱们能够获取到足够的浏览器相干的信息。咱们能够间接在浏览器控制台输出 navigator: 输入如下：
其中获取的 硬件类型 、 操作系统 、 用户代理 、 零碎字体 、 语言 、 屏幕分辨率 、 浏览器插件 、 浏览器扩大 、 浏览器设置 、 时区差 、 地理位置 等泛滥信息，这些信息能够称之为浏览器的 指纹信息。
这些指纹信息 “相似” 人类的 身高、年龄 等，有很大的抵触概率，只能作为辅助辨认。
这些指纹不能对某个人进行 唯一性 标识，也无奈对客户端进行 唯一性 断定，基于 HTML5 的诸多 高级指纹 对此提供了新思路。
HTML5的 高级指纹: Canvas 指纹：
什么是 Canvas 指纹
从根本上来说，每一种浏览器都会应用 不同 的图像处理引擎 ，不同的 导出选项 ，不同的 压缩等级 ，所以每一台电脑绘制出的图形都会有些许不同，这些图案能够被用来给用户设施 调配特定编号 （ 指纹），也就是说能够用来辨认不同用户。
那么，如何给咱们的网站减少 Canvas 指纹 呢？
咱们能够通过 html5 的canvas接口，在网页上绘制一个 暗藏 的画布图像。
值得注意的是，如果用户的 设施 ， 操作系统 ， 浏览器 都一样的话，计算出来的 canvas 指纹是 一样 的。换句话说：canvas 指纹 不具备唯一性，要和其余的浏览器指纹互相联合利用来进一步计算出区分度更高的指纹标识。
如何获取 Canvas 指纹
基于 Canvas 绘制特定内容的图片，应用 canvas.toDataURL() 办法返回该图片内容的 base64 编码 字符串。对于 PNG 文件格式，以块 (chunk) 划分，最初一块是一段 32 位的 CRC 校验，提取这段CRC 校验码 便能够用于用户的 惟一标识。
测试结果表明，同一浏览器 拜访该域时生成的 CRC 校验码 总是 不变。
能够简略了解为同样的 HTML Canvas 元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。呈现这种状况可能是有几个起因：
- 在图片格式上，不同 web 浏览器应用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。
- 在像素级别来看，操作系统各自应用了不同的设置和算法来进行抗锯齿和像素渲染操作。
- 即便是雷同的绘图操作，最终产生的图片数据在 hash 层面上仍然是不同的。
获取 Canvas 指纹：
<script type="text/javascript">
function bin2hex(s) {
var i,
l,
o = "",
n;
s += "";
for (i = 0, l = s.length; i < l; i++) {n = s.charCodeAt(i).toString(16);
o += n.length < 2 ? "0" + n : n;
}
return o;
}
function getUUID(domain) {var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var txt = domain;
ctx.textBaseline = "top";
ctx.font = "14px'Arial'";
ctx.textBaseline = "tencent";
ctx.fillStyle = "#f60";
ctx.fillRect(125, 1, 62, 20);
ctx.fillStyle = "#069";
ctx.fillText(txt, 2, 15);
ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
ctx.fillText(txt, 4, 17);
var b64 = canvas.toDataURL().replace("data:image/png;base64,", "");
// window.atob 用于解码应用 base-64 编码的字符串
var bin = atob(b64);
var crc = bin2hex(bin.slice(-16, -12));
return crc;
}
console.log(getUUID("公众号：前端开发爱好者"));
</script>不同浏览器 查看取得不同的指纹信息：
如何检测 canvas 指纹？
在线检测地址：https://browserleaks.com/canvas
如何暗藏本人的 canvas 指纹？
随着谷歌浏览器发表为了爱护用户的隐衷，跨域申请不再携带 cookies。浏览器指纹技术成为追踪用户的热门技术，那有没有方法 暗藏 咱们的 canvas 指纹呢？
目前次要用 2 种形式：
- 装置浏览器插件，谷歌利用商店有随机批改
canvas指纹的插件（CanvasFingerprintBlock），其原理是，每次随机往 canvas 画布外面注入一个随机的乐音（人肉眼是看不到的），从而影响图片数据的CRC校验后果。 - 相似
LoginBox,multilogin这样的指纹仿关联软件，其原理是：为每个浏览器窗口环境独自调配指纹数据，和第 1 种形式一样，也是往 canvas 画布外面注入一个随机的乐音，只是这个乐音是固定的。
写在最初
公众号：前端开发爱好者专一分享web前端相干技术文章、视频教程资源、热点资讯等，如果喜爱我的分享，给 🐟🐟 点一个赞👍 或者➕关注都是对我最大的反对。
