使用canvas fingerprinting追踪用户信息

总结一下使用canvas fingerprinting的过程

需求分析（页未央的点赞模块功能）
提示图片没贴��，等我测完了给大家贴，上传图片好麻烦，求快捷方法markdown的；

• 点赞次数

• 是否登陆

  • 登陆了
    
    • 记录userId判断是否点赞

  • 没登录

    • 1:会出现的问题：

      • 什么时机产生

        • 方案一
          
          • 用户打开页面，获取cookie/seesion，生成一个唯一的识别码
          • uuid，储存下来，前端再进行二次判断是否此用户出现过。
        • 方案二
          
          • 使用canvas fingerprinter（由前端根据用户浏览器的各种信息【比如分辨率，浏览器设定，浏览器版本，硬件资讯等】生成一个canvas）比如获取浏览器的序列号；

        • 怎么获取浏览器信息：

          • https://blog.allenchou.cc/canvas-fingerprinting/
          • http://www.2cto.com/kf/201502/374742.html

        • 结论–canvas fingerprinting帆布指纹技术

        • 使用方案二
      • 产生以后怎么保证 同一个人映射唯一的 uuid
        
        • 只保证同一个浏览器看做一个用户
        • 几种场景
          
          • 安卓
            
            • 微信
            • qq
            • 各种浏览器（chrome，safari，firefox,UC,qq,猎豹，opera,自带的。。）
          • ios
            
            • 微信
            • qq
            • 各种浏览器
          • pc
            
            • 各种浏览器
            • ie9-
          • 平板
            
            • ipad
            • 其他平板
          • 可能会出现的问题
            
            • 一个人多刷
            • 无痕模式
            • 用户手动清除cookie
    • 2 #流程
      
      • 登陆
        
        • 根据userId判断是否点赞
      • 未登录
        
        • 用户打开浏览器
        • 根据浏览器的各种信息，前端生成一个canvas fingerprinting 图（一串b64 string代码）
        • 返回给后台，记录下来
        • 根据canvas指纹的不同确认未登录的用户
    • 3 考虑的问题
      
      • 返回的bs64太长，要简单点 截一段
      • 改动canvas使其简单短一点
      • 数据类型统一为 string

》和后台讨论完问题后开始查找资料和撸代码
其实除了帆船指纹方法还有很多其他的前端的方法用以追踪用户信息，我也顺便研究了一下❤️，后面再留链接大家看看；

#### 方案一

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
ctx.font = "24px Arial";
ctx.fillText("Hello Panda",22,