使用JS读取GPU信息实战

6,962次阅读

共计 1340 个字符，预计需要花费 4 分钟才能阅读完成。

一般判断访客客户端信息都是通过对 User Agent 字段读取识别来进行，但是一方面这个是能伪造，另外一方面这里面也没有显卡信息，正好查资料发现 HTML5 支持 canvas，所以可以通过 JS 获取图形设备的型号，比如 GPU 的型号，而目前基本上所有浏览器都已经支持 HTML5，因此这个功能得以实现：

(function () {var canvas = document.createElement('canvas'),
        gl = canvas.getContext('experimental-webgl'),
        debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
 
    console.log(gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL));
})();

运行这段代码就能获取到设备的 GPU 信息，包括 PC 和手机都可以。

演示：

我也将我的设备信息在线查看网站进行了测试，是可以正确读取的：设备信息在线查看

下面是完整实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title> New Document </title>
    </head>
    <body>
        <script id=clientEventHandlersJS language=javascript>
        (function () {
    var canvas, gl, glRenderer;
    function getCanvas() {if (canvas == null) {canvas = document.createElement('canvas');
        }
        return canvas;
    }
    function getGl() {if (gl == null) {gl = getCanvas().getContext('experimental-webgl');
        }
        return gl;
    }
   
    function getGlRenderer() {if (glRenderer == null) {debugInfo = getGl().getExtension('WEBGL_debug_renderer_info');
            glRenderer = debugInfo == null ? 'unknown' : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
        }
        return glRenderer;
    }
    
    if (window.MobileDevice == undefined) {window.MobileDevice = {};
    }
    window.MobileDevice.getGlRenderer = getGlRenderer;
})();
        </script>
         <h1>GPU: <script>document.write(MobileDevice.getGlRenderer());</script></h1>
    </body>
</html>