node 模拟生成浏览器指纹，添加干扰等，不包括浏览器内置方法

node模拟浏览器指纹之帆布指纹、字体指纹、webgl指纹

` 提示：不包含浏览器环境。关于浏览器环境后续再说

---

---

一、Canvas

示例：继承 node-canvas 添加噪点实现干扰指纹。

// 引入依赖包 npm install canvas


//重写 Node Canvas 添加噪点
class myCanvas {
    constructor() {
        this.CanvasNode = new Canvas();
    }
    getContext(){
        this.width && (this.CanvasNode.width = this.width);
        this.height && (this.CanvasNode.height = this.height);
        let ctx = this.CanvasNode.getContext.apply(this.CanvasNode, arguments);
        // 添加噪点，干扰指纹
        if (this.width && this.height){
            for (let i = 0; i < randInt(20, 80); i++) {
                let color = Math.floor(Math.random() * 150);
                ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ",1)";
                ctx.fillRect(randInt(0, this.CanvasNode.width), randInt(0, this.CanvasNode.height), 0.2,0.2)
            }
        }
        return ctx
    }
    toDataURL(){
        return this.CanvasNode.toDataURL()
    }
}

function test() {
    // 某站获取canvas指纹示例代码(把base64图片数据转hash值就是指纹)
    let canvas = new myCanvas();
    canvas.width = 280;
    canvas.height = 60;
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = "rgb(102, 204, 0)";
    ctx.fillRect(100, 5, 80, 50);
    ctx.fillStyle = "#f60";
    ctx.font = "16pt Arial";
    ctx.fillText('<@nv45. F1n63r,Pr1n71n6!', 10, 40);
    ctx.strokeStyle = "rgb(120, 186, 176)";
    ctx.arc(80, 10, 20, 0, Math.PI, false);
    ctx.stroke();
    return canvas.toDataURL()
}

console.log(test())
console.log(test() === test());

示例结果：

base64图片

// // es5语法
        // function myCanvas (){
        //     this.CanvasNode = new Canvas();
        // }
        // myCanvas.prototype.getContext = function(){
        //     this.width && (this.CanvasNode.width = this.width);
        //     this.height && (this.CanvasNode.height = this.height);
        //     let ctx = this.CanvasNode.getContext.apply(this.CanvasNode, arguments);
        //     for (let i = 0; i < randInt(20, 80); i++) {
        //         let color = Math.floor(Math.random() * 150);
        //         ctx.fillStyle = "rgba(" + color + "," + color + "," + color + ",1)";
        //         ctx.fillRect(randInt(0, this.CanvasNode.width), randInt(0, this.CanvasNode.height), 10.2,10.2)
        //     }
        //     return ctx
        // }
        // myCanvas.prototype.toDataURL = function(){
        //     return this.CanvasNode.toDataURL()
        // }

二、后续添加字体和webgl