canvas指纹(帆布指纹) 原理

Posted 令月十一

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas指纹(帆布指纹) 原理相关的知识,希望对你有一定的参考价值。

https://blog.csdn.net/sinat_30162391/article/details/122415151

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8" /> 
  <meta name="viewport" content="width=device-width" /> 
  <title>JS Bin</title> 
 </head> 
 <body> 
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> 
  <script>
var getCanvasFp = function (options) 
    options = options ? options : ;
    var result = []
    // Very simple now, need to make it more complex (geo shapes etc)
    var canvas = document.createElement('canvas')
    canvas.width = 2000
    canvas.height = 200
    canvas.style.display = 'inline'
    var ctx = canvas.getContext('2d')
    // detect browser support of canvas winding
    // http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/
    // https://github.com/Modernizr/Modernizr/blob/master/feature-detects/canvas/winding.js
    ctx.rect(0, 0, 10, 10)
    ctx.rect(2, 2, 6, 6)
    result.push('canvas winding:' + ((ctx.isPointInPath(5, 5, 'evenodd') === false) ? 'yes' : 'no'))

    ctx.textBaseline = 'alphabetic'
    ctx.fillStyle = '#f60'
    ctx.fillRect(125, 1, 62, 20)
    ctx.fillStyle = '#069'
    // https://github.com/Valve/fingerprintjs2/issues/66
    if (options.dontUseFakeFontInCanvas) 
      ctx.font = '11pt Arial'
     else 
      ctx.font = '11pt no-real-font-123'
    
    ctx.fillText('Cwm fjordbank glyphs vext quiz, \\ud83d\\ude03', 2, 15)
    ctx.fillStyle = 'rgba(102, 204, 0, 0.2)'
    ctx.font = '18pt Arial'
    ctx.fillText('Cwm fjordbank glyphs vext quiz, \\ud83d\\ude03', 4, 45)

    // canvas blending
    // http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/
    // http://jsfiddle.net/NDYV8/16/
    ctx.globalCompositeOperation = 'multiply'
    ctx.fillStyle = 'rgb(255,0,255)'
    ctx.beginPath()
    ctx.arc(50, 50, 50, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = 'rgb(0,255,255)'
    ctx.beginPath()
    ctx.arc(100, 50, 50, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = 'rgb(255,255,0)'
    ctx.beginPath()
    ctx.arc(75, 100, 50, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fill()
    ctx.fillStyle = 'rgb(255,0,255)'
    // canvas winding
    // http://blogs.adobe.com/webplatform/2013/01/30/winding-rules-in-canvas/
    // http://jsfiddle.net/NDYV8/19/
    ctx.arc(75, 75, 75, 0, Math.PI * 2, true)
    ctx.arc(75, 75, 25, 0, Math.PI * 2, true)
    ctx.fill('evenodd')

    if (canvas.toDataURL)  result.push('canvas fp:' + canvas.toDataURL()) 
    return result
  

let fingerPrintRawData = getCanvasFp()[1];
let fingerPrintHash = md5(fingerPrintRawData);
document.write("浏览器指纹 : " + fingerPrintHash);
</script>  
 </body>
</html>

以上是关于canvas指纹(帆布指纹) 原理的主要内容,如果未能解决你的问题,请参考以下文章

canvas指纹(帆布指纹)

canvas指纹(帆布指纹)

帆布指纹调研

帆布指纹调研

帆布指纹调研

帆布指纹调研