在wp页面上实现qrcode扫描器
我正在尝试在我的Wordpress页面或弹出窗口中实现一个二维码扫描器，这样当用户访问页面/弹出链接时，他/她将能够扫描二维码。二维码基本上是一个woocommerce产品的网址，所以我希望二维码扫描器只有在二维码是从我的网站生成的情况下才会继续。其他不是从我的网站生成的二维码可以读取，但只显示URL或代码等信息，而不重定向到URL。
场景是:我创建了一个带有二维码的woocommerce产品，然后我将二维码放在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>创建一个scanner控件并将其附加到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
Stack Overflow用户
发布于 2021-04-30 15:57:51
这项工作的功劳归功于Chris Schmich。
https://github.com/schmich这个代码是为了提醒二维码扫描器的内容而设计的，我对它做了一些修改，以便在web浏览器中显示二维码，而不是本地的提醒消息。
此方法有效，它将在新窗口选项卡中打开编码在QRCode中的URL链接，确保从以下位置下载库
https://github.com/schmich/instascan/releases
如果你应该从上面的链接下载这些库，并将src of script标签添加到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>要生成qrcode，您可以使用以下代码片段，
$qrcode = base_url().'MPDF/mpdf/index'；//您的网址链接会在'=‘后移入此处，并将其分配给$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);https://stackoverflow.com/questions/54441144
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号