Question

我正在尝试使用cordova qrscanner插件： https://github.com/pubudu-ranasinghe/cordova-plugin-qrscanner2 但扫描功能不会显示相机。

我有一个按钮，点击后面我有以下代码：

QRScanner.show();
QRScanner.scan(function(err, contents){
    if(err){
      if(err.name === 'SCAN_CANCELED') {
        alert('The scan was canceled before a QR code was found.');
      } else {
        alert(err._message);
      }
    }
    alert('Scan returned: ' + contents);
  });

我已经尝试过phonegap-plugin-barcodescanner，但它无法识别我质量差的条形码。

非常感谢您的帮助。

奥米德

Answer 1

如果您正在使用离子，则需要在启动摄像机视图时将ion-app设置为透明。

window.document.querySelector('ion-app').classList.add('transparentBody');

<强> CSS

.transparentBody {
    background: none transparent !important;
    background-color: none;
}

Answer 2

因为主ion-app标签尚不透明。它覆盖了相机。

请参阅此Native QR Scanner Implementation in Ionic 2。

从该链接引用。

第1步：在您的variable.scss文件的css下面添加：

ion-app.cameraView, ion-app.cameraView ion-content, ion-app.cameraView .nav-decor {
  background: transparent none !important;
}

第2步：现在，您需要在home.ts文件中添加以下两种方法。

showCamera() {
  (window.document.querySelector('ion-app') as 
HTMLElement).classList.add('cameraView');
}

hideCamera() {
  (window.document.querySelector('ion-app') as 
HTMLElement).classList.remove('cameraView');
}

现在，在ionViewWillEnter（）生命周期方法中调用showCamer（）方法。另外，当您离开此页面时，请不要忘记调用hideCamera（）。因此，您需要在ionViewWillLeave（）生命周期方法中调用hideCamera（）。

ionViewWillEnter(){
   this.showCamera();
}
ionViewWillLeave(){
   this.hideCamera(); 
}

我尝试过。对我来说效果很好。

cordova qr-scanner扫描不显示相机

2 个答案: