时间戳

首页 > 解决方案 > wp页面上的二维码扫描器实现

javascript - wp页面上的二维码扫描器实现

问题描述

我正在尝试在我的 Wordpress 页面或弹出窗口中实现 QR 码扫描仪，因此当用户访问页面/弹出窗口链接时，他/她将能够扫描 QR 码。QR 码基本上是 woocommerce 产品 url，所以我希望 QR 码扫描仪仅在从我的网站生成 QR 码时继续。可以读取不是从我的站点生成的其他二维码，但仅显示 URL 或代码等信息，而无需重定向到 URL。

场景是：我使用 QR 码创建了一个 woocommerce 产品，然后我将 QR 码放置在 restoran 的菜单/桌子上。用户将访问我的网站并打开二维码扫描仪页面，然后扫描二维码，他们将被自动重定向到 woocommerce 产品。如果二维码不是从我的网站生成的，它将不会重定向，而只会显示二维码内的信息。

我找到了这个 WP 插件，但它完全不起作用：https ://github.com/eManagerNYC/QR-Code-Scanner

我从这里找到了另一种使用 html5 QRcode 扫描仪的方法：https ://github.com/dwa012/html5-qrcode

但它大约有 4 年历史了，这个用于支持 HTML5 的浏览器的 JavaScript 二维码扫描器：https ://github.com/jbialobr/JsQRScanner但我不知道如何安装或实现它。

将js目录中的所有文件放在服务器上。

将 js 脚本添加到您的页面中。

<script type="text/javascript" src="/js/jsqrscanner.nocache.js"></script>

创建一个扫描仪控件并将其附加到 DOM。

 <script type="text/javascript">
    function onQRCodeScanned(scannedText)
    {
        var scannedTextMemo = document.getElementById("scannedTextMemo");
        if(scannedTextMemo)
        {
            scannedTextMemo.value = scannedText;
        }
    }

    //this function will be called when JsQRScanner is ready to use
    function JsQRScannerReady()
    {
        //create a new scanner passing to it a callback function that will be invoked when
        //the scanner succesfully scan a QR code
        var jbScanner = new JsQRScanner(onQRCodeScanned);
        //reduce the size of analyzed images to increase performance on mobile devices
        jbScanner.setSnapImageMaxSize(300);
        var scannerParentElement = document.getElementById("scanner");
        if(scannerParentElement)
        {
            //append the jbScanner to an existing DOM element
            jbScanner.appendTo(scannerParentElement);
        }        
    }
  </script>

以自定义方式提供视频流：

<script type="text/javascript">
    function onQRCodeScanned(scannedText)
    {
        var scannedTextMemo = document.getElementById("scannedTextMemo");
        if(scannedTextMemo)
        {
            scannedTextMemo.value = scannedText;
        }
    }

    //funtion returning a promise with a video stream
    function provideVideoQQ()
    {
        return navigator.mediaDevices.enumerateDevices()
        .then(function(devices) {
            var exCameras = [];
            devices.forEach(function(device) {
            if (device.kind === 'videoinput') {
              exCameras.push(device.deviceId)
            }
         });

            return Promise.resolve(exCameras);
        }).then(function(ids){
            if(ids.length === 0)
            {
              return Promise.reject('Could not find a webcam');
            }

            return navigator.mediaDevices.getUserMedia({
                video: {
                  'optional': [{
                    'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
                    }]
                }
            });        
        });                
    }  

    //this function will be called when JsQRScanner is ready to use
    function JsQRScannerReady()
    {
        //create a new scanner passing to it a callback function that will be invoked when
        //the scanner succesfully scan a QR code
        var jbScanner = new JsQRScanner(onQRCodeScanned, provideVideoQQ);
        //reduce the size of analyzed images to increase performance on mobile devices
        jbScanner.setSnapImageMaxSize(300);
        var scannerParentElement = document.getElementById("scanner");
        if(scannerParentElement)
        {
            //append the jbScanner to an existing DOM element
            jbScanner.appendTo(scannerParentElement);
        }        
    }
  </script>

如果有人可以帮助我如何在 wordpress 页面上实现此代码，我们将不胜感激。

标签： javascriptphphtmlhtml5-canvas

解决方案

这项工作的功劳归功于 Chris Schmich

https://github.com/schmich 该代码旨在提醒 QR 码扫描仪的内容，我对其稍作修改，将 QR 码显示到 Web 浏览器中，而不是本地警报消息。

此方法有效，它将在新窗口选项卡中打开在您的 QRCode 中编码的 URL 链接，确保您从

https://github.com/schmich/instascan/releases

它可以 100% 工作，前提是您应该从上面的链接下载库并在 head 标签内添加 script 标签的 src。

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
            <style>
                #preview{
                   width:500px;
                   height: 500px;
                   margin:0px auto;
                }
                </style>
        </head>
        <body>
        <h1 style="color:blue">Scan your QRCode</h1>
                    <video id="preview"></video>
        
            
            <script src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
            <script type="text/javascript">
                var scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5, mirror: false });
                scanner.addListener('scan',function(content){
        
                    window.location.href=content;
                });
                Instascan.Camera.getCameras().then(function (cameras){
                    if(cameras.length>0){
                        scanner.start(cameras[0]);
                        $('[name="options"]').on('change',function(){
                            if($(this).val()==1){
                                if(cameras[0]!=""){
                                    scanner.start(cameras[0]);
                                }else{
                                    alert('No Front camera found!');
                                }
                            }
                        });
                    }else{
                        console.error('No cameras found.');
                        alert('No cameras found.');
                    }
                }).catch(function(e){
                    console.error(e);
                });
            </script>
            <div class="btn-group btn-group-toggle mb-5" data-toggle="buttons">
              <label class="btn btn-primary active">
                <input type="radio" name="options" value="1" autocomplete="off" checked> Front Camera
              </label>
            </div>
        </body>
        </html>

要生成 qrcode，您可以使用以下代码片段，

$qrcode = base_url().'MPDF/mpdf/index'; //您的 URL 链接在 '=' 分配给 $qrcode 之后进入

        $this->load->library('ciqrcode');

        $params['data'] = $qrcode;
        $params['level'] = 'H';
        $params['size'] = 10;
        $params['savename'] = FCPATH.'public/uploads/tes.png';
        $this->ciqrcode->generate($params);

推荐阅读