【前端】js通过canvas获取浏览器的唯一指纹可以当做唯一标识
【前端】js通过canvas获取浏览器的唯一指纹可以当做唯一标识
<!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指纹(帆布指纹)_夏天然后的博客-CSDN博客