H5 画布指纹识别

原理

基于Canvas绘制特定内容的图片，使用canvas.toDataURL()方法返回该图片内容的base64编码字符串。对于PNG文件格式，以块(chunk)划分，最后一块是一段32位的CRC校验，提取这段CRC校验码便可以用于用户的唯一标识。

测试结果表明，同一浏览器访问该域时生成的CRC校验码总是不变。可以简单理解为同样的HTML Canvas元素绘制操作，在不同的操作系统不同的浏览器上，产生的图片内容其实是不完全相同的。出现这种情况可能是有几个原因：

在图片格式上，不同web浏览器使用了不同的图形处理引擎、不同的图片导出选项、不同的默认压缩级别等。 在像素级别来看，操作系统各自使用了不同的设置和算法来进行抗锯齿和子像素渲染操作。 即使是相同的绘图操作，最终产生的图片数据在hash层面上依然是不同的。

代码

function GetCanvasFingerprintRecognition() {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        const txt = location.host;
        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);
        const base64 = canvas.toDataURL().replace("data:image/png;base64,", "");
        const bin = atob(base64).slice(-16, -12);
        let o = "";
        let n = "";
        for (let i = 0; i < bin.length; i++) {
          n = bin.charCodeAt(i).toString(16);
          o += n.length < 2 ? "0" + n : n;
        }
        return o;
}

const span = document.createElement("span");
span.textContent = `该设备在此浏览器中画布指纹识别 = ${GetCanvasFingerprintRecognition()}`;
document.body.append(span);