快捷搜索:   服务器  PHP  安全  linux 安全  IIS

JS获取访客GPU显卡信息的方法(含获取手机显卡信息)

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



再进行延伸,其实我们还可以通过GPU信息来判断访客的设备是什么,主要是用来判断手机端是什么设备,比如是IPHONE或者IPAD,他们的型号是什么

不过这还有小问题,有些同一代设备,使用的 GPU 型号完全相同,比如 iPhone 6s, iPhone 6s Plus, iPhone SE。它们用的都是 Apple A9 GPU,怎么区分开它们呢?你会发现它们最大的不同不就是分辨率不同吗?而通过 JavaScript 我们又可以方便地获取屏幕分辨率,这样把两个手段综合应用一下就可以获取设备的准确型号了。


详细衍生方法如下


html代码部分:

<html>
    <head>
        <title>Mobile Device Example</title>
        <script src="./device.js"></script>
    </head>
    <head>
        <h1>GPU: <script>document.write(MobileDevice.getGlRenderer());</script></h1>
        <h1>Device Models: <script>document.write(MobileDevice.getModels().join(' or '));</script></h1>
    </head>
</html>

device.js部分

(function () {
    var canvas, gl, glRenderer, models,
        devices = {
            "Apple A7 GPU": {
                1136: ["iPhone 5", "iPhone 5s"],
                2048: ["iPad Air", "iPad Mini 2", "iPad Mini 3"]
            },
            "Apple A8 GPU": {
                1136: ["iPod touch (6th generation)"],
                1334: ["iPhone 6"],
                2001: ["iPhone 6 Plus"],
                2048: ["iPad Air 2", "iPad Mini 4"]
            },
            "Apple A9 GPU": {
                1136: ["iPhone SE"],
                1334: ["iPhone 6s"],
                2001: ["iPhone 6s Plus"],
                2224: ["iPad Pro (9.7-inch)"],
                2732: ["iPad Pro (12.9-inch)"]
            },
            "Apple A10 GPU": {
                1334: ["iPhone 7"],
                2001: ["iPhone 7 Plus"]
            }
        };
    function getCanvas() {
        if (canvas == null) {
            canvas = document.createElement('canvas');
        }
        return canvas;
    }
    function getGl() {
        if (gl == null) {
            gl = getCanvas().getContext('experimental-webgl');
        }
        return gl;
    }
    function getScreenWidth() {
        return Math.max(screen.width, screen.height) * (window.devicePixelRatio || 1);
    }
    function getGlRenderer() {
        if (glRenderer == null) {
            debugInfo = getGl().getExtension('WEBGL_debug_renderer_info');
            glRenderer = debugInfo == null ? 'unknown' : getGl().getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
        }
        return glRenderer;
    }
    function getModels() {
        if (models == null) {
            var device = devices[getGlRenderer()];
            if (device == undefined) {
                models = ['unknown'];
            } else {
                models = device[getScreenWidth()];
                if (models == undefined) {
                    models = ['unknown'];
                }
            }
        }
        return models;
    }
    if (window.MobileDevice == undefined) {
        window.MobileDevice = {};
    }
    window.MobileDevice.getGlRenderer = getGlRenderer;
    window.MobileDevice.getModels = getModels;
})();


顶(5)
踩(0)

您可能还会对下面的文章感兴趣:

最新评论