wp页面上的二维码扫描器实现
Posted
技术标签:
【中文标题】wp页面上的二维码扫描器实现【英文标题】：qrcode scaner implementation on wp page 【发布时间】：2019-06-23 18:24:02 【问题描述】：我正在尝试在我的 Wordpress 页面或弹出窗口中实现 QR 码扫描器，因此当用户访问页面/弹出窗口链接时，他/她将能够扫描 QR 码。 QR 码基本上是 woocommerce 产品 url，所以我希望 QR 码扫描仪仅在从我的网站生成 QR 码时继续。可以读取不是从我的网站生成的其他二维码，但仅显示 URL 或代码等信息，而无需重定向到 URL。
场景是：我使用 QR 码创建了一个 woocommerce 产品，然后我将 QR 码放置在 restoran 的菜单/表格上。用户将访问我的网站并打开二维码扫描仪页面，然后扫描二维码，他们将被自动重定向到 woocommerce 产品。如果二维码不是从我的网站生成的，它不会重定向，只会显示二维码内的信息。
我找到了这个 WP 插件，但它完全不起作用：https://github.com/eManagerNYC/QR-Code-Scanner
我从这里找到了另一种使用 html5 二维码扫描器的方法：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 页面上实现此代码，我们将不胜感激。
【问题讨论】：
你让它工作了吗？ 【参考方案1】：这项工作的功劳归于 Chris Schmich
https://github.com/schmich 该代码旨在提醒 QR 码扫描仪的内容，我对其稍作修改，将 QR 码显示到 Web 浏览器中，而不是本地警报消息。
此方法有效，它将在新窗口选项卡中打开您的 QRCode 中编码的 URL 链接，请确保您从以下位置下载库
https://github.com/schmich/instascan/releases
如果您应该从上面的链接下载库并将脚本标签的 src 添加到 head 标签内，它可以 100% 工作。
<!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>
生成二维码可以使用以下代码sn-p，
$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);
【讨论】：
所以这段代码会询问相机的激活权限，然后你通过浏览器拍摄 qr 的照片，然后结果（比如网站）会加载？ $params['savename'] = FCPATH.'public/uploads/tes.png';将 qrcode 保存为 tes.png，这个 qrcode 的图像应该出现在你的相机前，最好你有它在你的手机里，然后用你的手机在你的相机前挥动它，它应该带你到 $param[' data'] ，在我的例子中是 mpdf/index 中的 pdf 文件，我将在我的相机前显示 qrcode 后打印 pdf，以上是关于wp页面上的二维码扫描器实现的主要内容，如果未能解决你的问题，请参考以下文章
实现手机扫描二维码页面登录，类似web微信-第一篇，业务分析